Массовая ajax-загрузка картинок на сервер с помощью jQuery

Одной из распространенных задач при разработке того или иного проекта является загрузка изображений на сайт, это могут быть фотографии в альбомы, рисунки в статьи или банальные аватарки пользователей. Давайте же решим эту задачу.

I. Проектирование базы данных

Нам понадобится две таблицы — это users и user_uploads, в первой будем хранить информацию о пользователях (id, username, password и т.д.), во вторую же будем записывать информацию о загруженных изображениях.

CREATE TABLE `users` (
    `user_id` int(11) AUTO_INCREMENT PRIMARY KEY,
    `username` varchar(255) UNIQUE KEY,
    `password` varchar(100),
    `email` varchar(255) UNIQUE KEY
)

CREATE TABLE  `user_uploads` (
    `upload_id` int(11) AUTO_INCREMENT PRIMARY KEY,
    `image_name` text,
    `user_id_fk` int(11),
    `created` int(11)
)

II. Код Javascript (jQuery)

Добавим обработку формы загрузки изображений, основную задачу будет выполнять jquery.wallform.js, для работы которого нам необходимо подключить jQuery. После выбора нужных картинок срабатывает функция $("#photoimg").change(function(){}), где "photoimg" — идентификатор поля типа "file". Данная функция как раз вызывает .ajaxForm(), которая и выполняет ajax — отправку файлов на сервер. Результат выводится в блок с ID: "preview".

<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    $("#photoimg").change(function() {
        var A = $("#imageloadstatus");
        var B = $("#imageloadbutton");
        $("#imageform").ajaxForm({
            target: '#preview', 
            beforeSubmit:function() {
                A.show();
                B.hide();
            }, 
            success:function(){
                A.hide();
                B.show();
            }, 
            error:function(){
                A.hide();
                B.show();
            } 
        }).submit();
    });
}); 
</script>

III. PHP обработка

PHP обработка состоит из трех пунктов(файлов) — это конфиг и подключение к базе данных, генерация формы и загрузки файлов на сервер.

1) db.php — подключение к базе данных;

<?php
    $mysql_hostname = "localhost";
    $mysql_user = "username";
    $mysql_password = "password";
    $mysql_database = "database";
    $prefix = "";
    $dbh = mysqli_connect($mysql_hostname, $mysql_user, $mysql_password, $mysql_database);
?>

2) index.php — создание формы

<?php
    session_start();
    $session_id = '1'; /* Создание сессии */
?>
<div id='preview'></div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
    Загрузка картинок: 
    <div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Загрузка ...."/></div>
    <div id='imageloadbutton'>
        <input type="file" name="photos[]" id="photoimg" multiple="true" />
    </div>
</form>

3) ajaxImageUpload.php — обработка формы, загрузка изображений на сервер

<?php
    error_reporting(0); /* Отключаем вывод ошибок */
    require_once 'db.php';
    session_start();
    $session_id = '1';
    define ("MAX_SIZE","2000"); /* 2MB максимальный размер загружаемого файла */
    function getExtension($str) { /* Определяем формат файла */
        $i = strrpos($str,".");
        if(!$i) { return ""; }
        $l = strlen($str) - $i;
        $ext = substr($str,$i+1,$l);
        return $ext;
    }
    /* Разрешенные форматы для файлов, при желании можно добавить свои */
    $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
        $uploaddir = "uploads/"; /* Папка для загрузки изображений */
        foreach ($_FILES['photos']['name'] as $name => $value) {
            $filename = stripslashes($_FILES['photos']['name'][$name]);
            $size = filesize($_FILES['photos']['tmp_name'][$name]);
            $ext = getExtension($filename);
            $ext = strtolower($ext);
            if(in_array($ext,$valid_formats)) {
                /* Проверка размера файла */
                if($size < (MAX_SIZE*1024)) { 
                    $image_name=time().$filename; 
                    echo "<img src='".$uploaddir.$image_name."' class='imgList'>"; 
                    $newname=$uploaddir.$image_name; 
                    /* Сохраняем файл */
                    if(move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) { 
                        $time=time(); 
                        /* Добавляем инфомацию в базу */
                        mysqli_query($dbh, "INSERT INTO user_uploads(image_name, user_id_fk, created) VALUES('{$image_name}', '{$session_id}', '{$time}')");
                    } else { 
                        echo '<span class="imgList">Ошибка! Файл слишком велик!</span>'; 
                    } 
                } else { 
                    echo '<span class="imgList">Ошибка! Файл слишком велик!</span>'; 
                } 
            } else { 
                echo '<span class="imgList">Данный формат запрещен!</span>'; 
            } 
        } 
    } 
?>

IV. Добавляем CSS стили для блоков

#preview {
    color: #cc0000;
    font-size: 12px;
}
.imgList {
    max-height: 150px;
    margin-left: 5px;
    border: 1px solid #dedede;
    padding: 4px; 
    float: left; 
}

Вот и все! При желании данный скрипт легко переделать под загрузку любых файлов на сервер. Также не забываем выставить права на запись для необходимой директории.

Скачать готовый скрипт можно здесь.