Загрузка изображения drag and drop. HTML5: загрузка файлов с помощью Drag & Drop

This markup doesn"t have anything specifically to do with drag and drop. It"s just a normal, functional , albeit with some extra HTML elements for potential states.

Choose a file or drag it here. Upload Done! Error! .

We"ll hide those states until we need them:

Box__dragndrop, .box__uploading, .box__success, .box__error { display: none; }

A little explanation:

Regarding states: .box__uploading element will be visible during the Ajax process of file upload (and the others will still be hidden). Then .box__success or .box__error will be shown depending on what happens.
input and label are the functional parts of the form. I wrote about styling these together in my post about customizing file inputs . In that post I also described the purpose of attribute. The input and label also serve as an alternative for selecting files in the standard way (or the only way if drag and drop isn"t supported).
.box__dragndrop will be shown if a browser supports drag and drop file upload functionality.

Feature detection

We can"t 100% rely on browsers supporting drag and drop. We should provide a fallback solution. And so: feature detection . Drag & drop file upload relies on a number of different JavaScript API"s, so we"ll need to check on all of them.

HTML

Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).

Разметка Сразу говорю, статья написана больше для новичков, чем для профессионалов. Поэтому некоторые моменты будут описываться очень подробно.

Для начала, нам необходимо создать HTML файл с таким содержанием:

Для загрузки, перетащите файл сюда.

Вся работа у нас будет происходить с контейнером dropZone. Теперь добавим стили для нашего документа (style.css):

Body { font: 12px Arial, sans-serif; } #dropZone { color: #555; font-size: 18px; text-align: center; width: 400px; padding: 50px 0; margin: 50px auto; background: #eee; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #dropZone.hover { background: #ddd; border-color: #aaa; } #dropZone.error { background: #faa; border-color: #f00; } #dropZone.drop { background: #afa; border-color: #0f0; }

В стилях Вы можете заметить три состояния у элемента dropZone: при наведении, если возникает какая-то ошибка и при успешном выполнении.

Скрипт загрузки Теперь мы приступим к самому интересному - написанию JavaScript кода. Для начала, нам необходимо создать переменные, в одну из которых мы поместим нашу dropZone, а во второй укажем максимальный размер файла.

$(document).ready(function() { var dropZone = $("#dropZone"), maxFileSize = 1000000; // максимальный размер файла - 1 мб. });

Дальше мы должны проверить поддерживает ли браузер Drag and Drop, для этого мы будем использовать FileReader функцию. Если браузер не поддерживает Drag and Drop, то внутри элемента dropZone мы напишем «Не поддерживается браузером!» и добавим класс «error».

If (typeof(window.FileReader) == "undefined") { dropZone.text("Не поддерживается браузером!"); dropZone.addClass("error"); }

Следующее что мы сделаем это будет анимация эффекта перетаскивания файла на dropZone. Отслеживать эти действия мы будет с помощью событий «ondragover» и «ondragleave». Но, так как эти события не могут быть отслежены у jQuery объекта, нам необходимо обращаться не просто к «dropZone», а к «dropZone».

DropZone.ondragover = function() { dropZone.addClass("hover"); return false; }; dropZone.ondragleave = function() { dropZone.removeClass("hover"); return false; };

Теперь нам необходимо написать обработчик события «ondrop» - это событие когда перетянутый файл опустили. В некоторых браузерах при перетягивании файлов в окно браузера они автоматически открываются, что бы такого не произошло нам нужно отменить стандартное поведение браузера. Также нам необходимо убрать класс «hover», и добавить класс «drop».

DropZone.ondrop = function(event) { event.preventDefault(); dropZone.removeClass("hover"); dropZone.addClass("drop"); };

Var file = event.dataTransfer.files; if (file.size > maxFileSize) { dropZone.text("Файл слишком большой!"); dropZone.addClass("error"); return false; }

Теперь нам необходимо написать AJAX запрос отсылающий наш файл в обработчик. Для создания AJAX запроса мы будем использовать объект XMLHttpRequest. Добавим для объекта XMLHttpRequest два обработчика событий: один будет показывать прогресс загрузки файла, а второй результат загрузки. В качестве обработчика укажем файл upload.php.

Var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.onreadystatechange = stateChange; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-FILE-NAME", file.name); xhr.send(file);

Теперь займемся функциями прогресса загрузки и результата загрузки. В функции «uploadProgress» нет ничего сложного, лишь простейшая математика.

Function uploadProgress(event) { var percent = parseInt(event.loaded / event.total * 100); dropZone.text("Загрузка: " + percent + "%"); }

В функции «stateChange» мы должны проверить завершен ли процесс загрузки, и если да, то необходимо проверить не возникла ли какая-либо ошибка. Код успешного запроса «200», если же код отличается от этого, то это означает, что произошла ошибка.

Function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200) { dropZone.text("Загрузка успешно завершена!"); } else { dropZone.text("Произошла ошибка!"); dropZone.addClass("error"); } } }

Написание JavaScript части завершено.

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

На этом всё, надеюсь статья была полезной для Вас.

Скачать исходные файлы вы можете

Подготовили: Евгений Рыжков и Егор Скорняков Дата публикации: 12.06.2011

Задача

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

Решение

Смотрим демо пример . Пример можно забрать архивом . Проверено:

IE 6-9
Firefox 3.6-4
Opera 11.1
Chrome
Safari 5

Обращу внимание, что в данном случае проверено!= работает:

IE включая 9-ю версию не поддерживает File API (старая реализация);
Firefox 3.6+ поддерживает все, что нужно. Для более старых версий — старая реализация;
Opera 11.1 поддерживает File API, но не поддерживает DnD;
Chrome, начиная с 10-й версии, поддерживает все, что нужно;
Safari поддерживает все что нужно с 6-й версии.

Какой толк от этого в таком случае? Пользователи нормальных браузеров получают более удобные сайты.

Что качать:

плагинчик (12Kb в несжатом виде)

Быстрый старт

Подключаем скрипты, а в форму добавляет type =file с . Если браузер не поддерживает необходимый набор API, пользователь сможет загрузить фото «по старинке». Чтобы у него была возможность добавить несколько фото, динамически добавим кнопку «+», которая будет добавлять поля input type=file. Для этих целей в id поля присутствует 0, чтобы проще было организовать правильные имена добавленных полей.

...

Для браузеров, которые поддерживают Dnd и File API можно поля type=file вообще скрыть или удалить.

Как это работает

Если не вдаваться особо в детали, тогда принцип работы можно отобразить в виде подобной схемы:

(DnD API) все начинается когда пользователь отпускает зажатую кнопку мыши — срабатывает событие drop;

(DnD API) получаем объект DataTransfer от события drop;

(File API) вызывая DataTransfer.files получаем FileList — список файлов, которые пользователь перетащил в область загрузки;

(File API) перебирая все файлы читаем их содержимое с помощью объекта FileReader;

(File API) вызывая FileReader.readAsDataURL(../../../collect/js-plugins/ui/file) каждый раз, когда очередной файл удачно прочитан, формируем data URL объект. Когда он полностью будет сформирован произойдет событие onloadend объекта FileReader;

когда мы получили объект data:URL, мы можем подставить эти данные в src и отобразить , а так же отправить данные в двоичном виде на сервер;

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

Fine Uploader Plugin

update: 18.09.12 by Андрей Косяк.

Довольно удобный js-плагин по заливке файлов на сервер. Написан на чистом JS. Состоит из серверной части (на нескольких языках) и клиентской (JS и CSS).

НЕ использует флеш и какие-либо фреймворки.

Fineuploader использует XMLHttpRequest объект для передачи файлов с прогрессбаром для современных браузеров, а для всякого треша используется способ со старым добрым iframe-ом.

Знакомимся:

Проект на GitHub
Родная демка
Документация (на англ.)

Проверено:

IE 7-9
Firefox 3.6+
Opera 10.6+
Chrome
Safari 4+

Быстрый старт

Работоспособность плагина нужно проверять исключительно с сервера (локальный подойдет). В примере буду использовать серверную часть на PHP.

Перед первым стартом нужно подготовить почву:

На локальном сервере первое, что попросит скрипт, это увеличить значения параметров post_max_size и upload_max_filesize . Открываем файл php.ini находим эти параметры и ставим значения >= 10M. На реальном сервере скорее всего этот пункт не потребуется.

если тестируем на веб сервере, то ставим ей права 777
если тестируем на локальном, то в свойствах папки убираем галочку "только для чтения" (может работать и без этого)

из папки /server плагина забираем файл php.php . В нем, в первом блоке комментариев написано, какие строки нужно извлечь из комментариев, чтобы инициализировать класс. Добавляем сразу после блока с комментарием:

// допустимые расширения файлов $allowedExtensions = array(); // максимальный размер файла $sizeLimit = 10 * 1024 * 1024; // инициализация класса $uploader = new qqFileUploader($allowedExtensions, $sizeLimit); // тут нужно указать путь к папке /uploads $result = $uploader->handleUpload("../uploads/"); // возврат ответа после сохранения файла echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

Подключаем скрипт плагина и стили:

Please enable JavaScript to use file uploader.

JS-инициализация:

Window.onload = function(){ var uploader = new qq.FileUploader({ element: document.getElementById("file-uploader1"), action: "php/upload.php" // путь к серверной части плагина }); };

В этом уроке мы сделаем небольшую 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:

Работа с загруженными файлами

Для полноценного взаимодействия с вашими фалами, нам осталась добавить возможность манипулировать ими. Для начала нам нужно добавить фрагмент кода для извлечения информации о хранящихся файлах (имя и размер) и вернуть его в формате JSON.

Для этого обновляем файл upload.php до такого вида (вставлено условие else):

Функция PHP scandir просматривает папку uploads и возращает массив файлов или значение FALSE елси папка пуста.

Перебираем возвращаемое значение из функции scandir и сохраняем в массив $ result. Помните, мы игнорируем "." И "..", поскольку scandir всегда будет возвращать "." И ".." в качестве допустимого содержимого, относящегося к текущему и предыдущему каталогу.

Выводим правильные заголовки для разметки JSON, а также конвертируем PHP-массив в JSON-строку, используя функцию json_encode.

Теперь пришло время обновить index.php:

Dropzone.options.myDropzone = { init: function() { thisDropzone = this; $.get("upload.php", function(data) { $.each(data, function(key,value){ var mockFile = { name: value.name, size: value.size }; thisDropzone.options.addedfile.call(thisDropzone, mockFile); thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name); }); }); } };

Что мы тут накодили? Давайте разбиратся:

Увы и ах, мы добавили библиотеку Jquery на нашу страницу. Это на самом деле не необходимость для DropzoneJs. Мы используем только ajax-функцию JQuery $ .get. Вы же на своё усмотрение можете реализовать подобные запросы на vue.js или что вам больше по душе.

Мы добавили в форму элемент ID (my-dropzone). Это необходимо, для того что бы передать значения конфигурации в Dropzone. И для этого мы должны иметь уникальный индификатор указывающий на него. Таким образом мы можем настроить библиотеку, присвоив значения Dropzone.options.myDropzone.

Инициализируем основную часть редактирования. То, что мы здесь сделали, - передали функцию прослушивания события init Dropzone. Это событие вызывается, когда Dropzone инициализируется.

Получаем массив файлов из «upload.php» посредством ajax.

Создаём mockFile, используя значения с сервера. MockFile - это просто объекты JavaScript со свойствами имени и размера. Затем мы явно вызываем функции Dropbox и добавляем иконки, чтобы поместить существующие файлы в область загрузки Dropzone и создать их миниатюры.

Если вы сделали всё корректно. Загрузите несколько изображений и перезагрузите страницу с формой. Ранее загруженные файлы должны автоматически отображаться в области Dropzone.