Ajax и PHP. Загрузка изображения на сервер. Управляем загрузкой изображений

Загрузка файлов или картинок на сервер является довольно типичной задачей. Но прогресс не стоит на месте и поэтому сейчас конечно же хочется, чтобы загрузка файлов происходила в фоновом режиме. Как правило ранее это можно было реализовать с использованием технологии flash либо iframe. Также многие используют плагины такие как jQuery Form Plugin или Ajax File Upload Plugin или Multiple File Upload Plugin и море других. С появлением объекта FormData все стало значительно проще. FormData() позволяет составить набор данных для отправки на сервер с помощью XMLHttpRequest.

Давайте же попробуем написать свой код без всяких плагинов (ну кроме конечно фреймворка jQuery) для загрузки картинок или файлов на сервер в фоновом режиме. Вообще алгоритм наших действий будет примерно таков: заполняем поля формы данными. Поля могут быть какими угодно, и текст, и текстареа и селект и файлы. При выборе файлов, благодаря нашему коду на jQuery, эти файлы в фоновом режиме будут загружены во временную директорию на сервере, например в “tmp”. Далее при нажатии на кнопку submit формы, данные отправляются серверному скрипту, который эти данные обработает. Представим что это статьи. Переданные данные мы запишем в базу данных с уникальным id. Далее создадим в каталоге “images” директорию c уникальным номером “id” и если в папке “tmp” у нас были какие то файлы мы их скопируем в созданную папку “id” после чего очистим папку “tmp”. Резюмируя: фоном заливаем картинки в tmp, при сабмите формы данные записываем в базу, у нас появлется уникальный номер записи. Создаем папку с этим номером и перемещаем туда наши файлы. Все. В данной статье заливку в базу и копирование файлов мы рассматривать не будем. Думаю тут у каждого будет что-то свое. Мы сосредоточимся на одном – асинхронной загрузке картинок (или файлов).

Итак вот наш html кусок. Тут обратим внимание на то, что у нас есть гиф файл с картинкой прелоудером (зацикленный кружок), который мы стилями прячем от показа. Также полю file присвоим id = file, а форме enctype=”multipart/form-data”. Имя поля file будет file т.е. чтобы мы могли работать с массивом, раз у нас разрешена загрузка нескольких файлов (атрибут multiple).

#preloader {visibility: hidden;} Добавить информацию

В данной форме у нас помимо поля с файлом есть еще пара полей для примера: input=text. Т.е. перед нами обычная форма например для админки, которая представляет собой набор необходимых вам полей. Для начала если хотите можете проверить работу скрипта прописав вначале файла строки показа массива FILES:

//upload.php print_r($_FILES);

Теперь напишем наш серверный скрипт, который будет вызываться с помощью jQuery. Его задача перекинуть залитые файлы из временной директории сервера в нашу, допустим как мы решили в “tmp”, после чего показать их.

//upload.php function show_dir($dir) // функция показа картинок из tmp папки { $list = scandir($dir); unset($list,$list); foreach ($list as $file) { echo " "; } } foreach ($_FILES as $key => $value) { //перемещение файлов в tmp move_uploaded_file($value["tmp_name"], "tmp/".$value["name"]); } show_dir("./tmp/");

А теперь и наш js-скрипт, который в фоновом режиме зальет наши файлы на сервер. Все волшебство будет выполнено благодаря объекту FormData(). Этот код мы допишем в конец нашего index.php перед тегом.

$(document).ready(function(){ $("#preloader").hide(); $("#file").bind("change", function(){ var data = new FormData(); var error = ""; jQuery.each($("#file").files, function(i, file) { if(file.name.length < 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size > 1000000) { error = error + " File " + file.name + " is to big."; } //Проверка размера файла if(file.type != "image/png" && file.type != "image/jpg" && !file.type != "image/gif" && file.type != "image/jpeg") { error = error + "File " + file.name + " doesnt match png, jpg or gif"; } //Проверка типа файлов data.append("file-"+i, file); }); if (error != "") {$("#info").html(error);} else { $.ajax({ url: "upload.php", data: data, cache: false, contentType: false, processData: false, type: "POST", beforeSend: function() { $("#preloader").show(); }, success: function(data){ $("#info").html(data); $("#preloader").hide(); } }); } }) });

Ну вот вроде бы и все. Если кто-то что не понял, спрашивайте. Если у кого то будут дополнения, тоже буду рад!
Совет: если вы еще не использовали код для удаления файлов из какой-либо директории, то рекомендую для теста поменять функцию удаления rmdir на echo чтобы убедиться что будут удалены только те файлы которые вы хотите удалить. Gif прелоадеры можно взять например из моего урока Как сделать Gif анимацию . Примеры в конце статьи.

Если кому захочется добавить красоты, например прогресс бар, то для этого нам надо будет дописать несколько строк кода. В html шаблон мы добавим супер элемент из html5 – progress, а в js код, добавим несколько строк с объектом XMLHttpRequest.
И так, наш html дополнится следующим:

А в код js допишем:

Function progressHandlingFunction(e){ if(e.lengthComputable){ $("progress").attr({value:e.loaded,max:e.total}); } }

Xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // проверка что осуществляется upload myXhr.upload.addEventListener("progress",progressHandlingFunction, false); //передача в функцию значений } return myXhr; }

Финальный результат js кода:

$(document).ready(function(){ function progressHandlingFunction(e){ if(e.lengthComputable){ $("progress").attr({value:e.loaded,max:e.total}); } } $("#preloader").hide(); $("#file").bind("change", function(){ var data = new FormData(); var error = ""; jQuery.each($("#file").files, function(i, file) { if(file.name.length < 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size > 1000000) { error = error + " File " + file.name + " is to big."; } if(file.type != "image/png" && file.type != "image/jpg" && !file.type != "image/gif" && file.type != "image/jpeg") { error = error + "File " + file.name + " doesnt match png, jpg or gif"; } data.append("file-"+i, file); }); if (error != "") {$("#info").html(error);} else { $.ajax({ url: "productUploadImg.php", type: "POST", xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // проверка что осуществляется upload myXhr.upload.addEventListener("progress",progressHandlingFunction, false); //передача в функцию значений } return myXhr; }, data: data, cache: false, contentType: false, processData: false, beforeSend: function() { $("#preloader").show(); }, success: function(data){ $("#info").html(data); $("#preloader").hide(); } , error: errorHandler = function() { $("#info").html("Ошибка загрузки файлов"); } }); } }) });

Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.

В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое - что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress , то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).

Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.

Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.

Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели...

Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега ).

Таким образом, у нас есть HTML код с file полем и кнопкой «Загрузить файлы».

Загрузить файлы

Первым шагом, нужно получить данные загружаемых файлов.

При клике на file-поле, появляется окно выбора файлов, после выбора, данные о них сохраняются в input поле, а нам нужно их от туда «забрать». Для этого повесим на событие change JS функцию, которая будет сохранять имеющиеся данные file-поля в JS переменную files:

Var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; });

Данные файлов у нас есть, теперь их нужно отправить через AJAX. Вешаем это событие на клик по кнопке «Загрузить файлы».

В момент клика создаем новый объект new formData() и добавляем в него данные из переменной files . С помощью formData() мы добьемся того, что отправляемые данные будут выглядеть, как если бы мы просто сабмитили форму в браузере.

Чтобы такой запрос состоялся, в jQuery нужно указать дополнительные AJAX параметры, поэтому привычная функция $.post() не подходит и мы используем более гибкий аналог: $.ajax() .

Два важных дополнительных параметра нужно установить в false:

ProcessData Отключает обработку передаваемых данных. По умолчанию, например, для GET запросов jQuery собирает данные в строку запроса и добавляет эту строку в конец URL. Для POST данных делает другие преобразования. Нам любые изменения исходных данных будут мешать, поэтому отключаем эту опцию... contentType Отключает установку заголовка типа запроса. Дефолтная установка jQuery равна "application/x-www-form-urlencoded . Такой заголовок не предусматривает отправку файлов. Если установить этот параметр в "multipart/form-data" , PHP все равно не сможет распознать передаваемые данные и выведет предупреждение «Missing boundary in multipart/form-data»... В общем, проще всего отключить эту опция, тогда все работает! // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим объект данных формы var data = new FormData(); // заполняем объект данных файлами в подходящем для отправки формате $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную для идентификации запроса data.append("my_file_upload", 1); // AJAX запрос $.ajax({ url: "./submit.php", type: "POST", // важно! data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК - файлы загружены if(typeof respond.error === "undefined"){ // выведем пути загруженных файлов в блок ".ajax-reply" var files_path = respond.files; var html = ""; $.each(files_path, function(key, val){ html += val +"
"; }) $(".ajax-reply").html(html); } // ошибка else { console.log("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ console.log("ОШИБКА AJAX запроса: " + status, jqXHR); } }); });

Чтобы было наглядно обработаем запрос без дополнительных проверок для файлов, т.е. просто сохраним полученные файлы в нужную папку. Хотя, для безопасности, отправляемые файлы обязательно нужно проверять, хотя бы расширение (тип) файла...

Создадим файл submit.php с таким кодом (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):

jQuery(document).ready(function($){ // ссылка на файл AJAX обработчик var ajaxurl = ""; var nonce = ""; var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; }); // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим данные файлов в подходящем для отправки формате var data = new FormData(); $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную идентификатор запроса data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // AJAX запрос $reply.text("Загружаю..."); $.ajax({ url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК if(respond.success){ $.each(respond.data, function(key, val){ $reply.append(""); }); } // error else { $reply.text("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ $reply.text("ОШИБКА AJAX запроса: " + status); } }); }); })