Загрузка изображения drag and drop. Красивая AJAX форма для загрузки файлов

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

Мы будем использовать плагины jQuery File Upload и jQuery Knob для отображения .

Т.к. форма будет иметь возможность загружать файлы двумя способами, она будет работать даже если drag/drop не поддерживается.

HTML

Как обычно, начнем с HTML5 разметки:

Mini Ajax File Upload Form Drop Here Browse

В теге нашего документа, подключаем шрифты Google Webfonts, а перед закрытием тега — JavaScript библиотеки: jQuery, jQuery Knob и jQuery File Upload.

Главный элемент страницы — форма #upload . Внутри нее элемент #drop (принимает файлы с использованием drag&drop) и список, в котором будут отображаться загружаемые файлы. Разметка, которая будет генерироваться для загруженных файлов:

Sunset.jpg 145 KB

Элемент input будет спрятан с помощью CSS. Он нужен для инициализации плагина jQuery Knob, который будет рисовать файла. Input имеет атрибуты data-* , которые используются для обновления шкалы. Позже, когда мы будет отслеживать прогресс загрузки, мы будем обновлять эти значения для перерисовки шкалы. span будет содержать зеленую галку или красный крест.

jQuery

У посетителя будет 2 способа загрузки файла:

• Перетащить файл в окно браузера (в IE не работает).
• Нажатием на кнопку browse. Будет имитировано нажатие на спрятанный input и показано системное окно выбора файлов. Обратите внимание, что input имеет параметр multiple параметр, что позволит выбирать много файлов за один раз.

Когда файлы будут выбраны, они помещаются в очередь для последующей автоматической загрузки:

$(function(){ var ul = $("#upload ul"); $("#drop a").click(function(){ // имитация нажатия на поле выбора файла $(this).parent().find("input").click(); }); // инициализация плагина jQuery File Upload $("#upload").fileupload({ // этот элемент будет принимать перетаскиваемые на него файлы dropZone: $("#drop"), // Функция будет вызвана при помещении файла в очередь add: function (e, data) { var tpl = $("

"); // вывод имени и размера файла tpl.find("p").text(data.files.name) .append("" + formatFileSize(data.files.size) + ""); data.context = tpl.appendTo(ul); // инициализация плагина jQuery Knob tpl.find("input").knob(); // отслеживание нажатия на иконку отмены tpl.find("span").click(function(){ if(tpl.hasClass("working")){ jqXHR.abort(); } tpl.fadeOut(function(){ tpl.remove(); }); }); // Автоматически загружаем файл при добавлении в очередь var jqXHR = data.submit(); }, progress: function(e, data){ // Вычисление процента загрузки var progress = parseInt(data.loaded / data.total * 100, 10); // обновляем шкалу data.context.find("input").val(progress).change(); if(progress == 100){ data.context.removeClass("working"); } }, fail:function(e, data){ // что-то пошло не так data.context.addClass("error"); } }); $(document).on("drop dragover", function (e) { e.preventDefault(); }); // вспомогательная функция, которая форматирует размер файла function formatFileSize(bytes) { if (typeof bytes !== "number") { return ""; } if (bytes >= 1000000000) { return (bytes / 1000000000).toFixed(2) + " GB"; } if (bytes >= 1000000) { return (bytes / 1000000).toFixed(2) + " MB"; } return (bytes / 1000).toFixed(2) + " KB"; } });

В jQuery File Upload есть собственный интерфейс, но мы используем базовую версию плагина для создания собственного дизайна интерфейса. И чтобы наш интерфейс работал, мы передаем плагину несколько параметров / колбэков:

• dropZone – этот параметр содержит jQuery селектор, который будет принимать перетаскиваемые файлы. Файлы, брошенные на него, будут добавлены в очередь загрузки.
• add – функция вызывается при добавлении файла в очередь загрузки. Она будет генерировать разметку для файлов и вызвать метод data.submit() .
• progress – Эта функция будет вызываться каждые 100ms (можно изменить). Второй аргумент содержит размер файла и количество загруженных байт. Это позволяет отслеживать прогресс и обновлять шкалу.
• fail – функция вызывается при возникновении ошибки.

PHP

В комплект jQuery File Upload входит также и PHP скрипт для обработки файлов на сервере, но мы напишем свой. Процесс загрузки фалов будет происходить также как и при обычной загрузке, поэтому всю информацию о них мы можем получить из глобального массива $_FILES: