Главная » Языки программирования

Загрузка файла

На чтение 11 мин

HTML5 File API: множественная загрузка файлов на сервер

Когда передо мной в очередной раз встала задача об одновременной загрузке нескольких файлов на сервер (без перезагрузки страницы, само собой), я стал блуждать по интернетам в поисках довольно корявого jQuery-плагина, который позволяет имитировать ajax-загрузку файла (того самого плагина, который со скрытым фрэймом: от java- и flash- плагинов сразу было решено отказаться). В процессе поиска я вспомнил, что в грядущем стандарте html 5 возможности по работе с файлами должны быть существенно расширены, и часть этих возможностей доступна уже сейчас. В итоге было решено опробовать их в действии.

Рассматривать возможности File API будем на примере одновременной загрузки нескольких картинок на сервер. В конце статьи приводится готовое решение, оформленное в виде jQuery-плагина.

  1. Независимость от внешних плагинов
  2. Возможность контролировать процесс загрузки и отображать информацию о нем (прогрессбар всегда добавляет терпения пользователю)
  3. Возможность прочитать файл и узнать его размер до начала загрузки (в нашем примере это дает нам возможность отсеять файлы, не содержащие изображений и показывать миниатюры картинок)
  4. Возможность выбрать сразу несколько файлов через стандартное поле выбора файла
  5. Возможность использовать интерфейс drag and drop для выбора файлов. Да-да, мы сможем перетаскивать файлы для загрузки прямо с рабочего стола или, например, из проводника!

Работающий пример можно увидеть по адресу http://safron.pro/playground/html5uploader/, ниже приведены только наиболее важные фрагменты кода.

Для начала разберемся с html-кодом. Нам понадобится дефолтный элемент input, контейнер для перетаскивания файлов и список ul, куда мы будем помещать миниатюрки изображений:

Ничего особенного, кроме того, что для элемента input указан атрибут multiple=»true» . Это необходимо для того, чтобы в стандартном диалоге выбора файлов можно было выделять их сразу несколько. Кстати, начиная с Firefox 4, разработчики браузера обещают, что ненавистные многим верстальщикам стандартные поля выбора файла можно будет скрывать, а диалог показывать, вызвав событие click для скрытого элемента.

Теперь перейдем к JavaScript (обратите внимание, что я использовал jQuery для упрощения манипуляций с DOM. Тот, кто по каким-либо причинам захочет отказаться от jQuery, сможет без труда переделать скрипты таким образом, чтобы обойтись без него). Сначала сохраним в переменных ссылки на html-элементы, снявшиеся в главных ролях. Далее определим обработчики событий для стандартного поля выбора файлов и для области, куда можно будет перетаскивать файлы. 

 // Стандарный input для файлов var fileInput = $('#file-field'); // ul-список, содержащий миниатюрки выбранных файлов var imgList = $('ul#img-list'); // Контейнер, куда можно помещать файлы методом drag and drop var dropBox = $('#img-container'); // Обработка события выбора файлов в стандартном поле fileInput.bind( < change: function() < displayFiles(this.files); >>); // Обработка событий drag and drop при перетаскивании файлов на элемент dropBox dropBox.bind(< dragenter: function() < $(this).addClass('highlighted'); return false; >, dragover: function() < return false; >, dragleave: function() < $(this).removeClass('highlighted'); return false; >, drop: function(e) < var dt = e.originalEvent.dataTransfer; displayFiles(dt.files); return false; >>);

И в том и в другом случае в обработчике мы получаем доступ к объекту FileList, который по сути представляет собой массив объектов File. Этот массив передается функции displayFiles(), текст которой приведен ниже. 

 function displayFiles(files) < $.each(files, function(i, file) < if (!file.type.match(/image.*/)) < // Отсеиваем не картинки return true; >// Создаем элемент li и помещаем в него название, миниатюру и progress bar, // а также создаем ему свойство file, куда помещаем объект File (при загрузке понадобится) var li = $('').appendTo(imgList); $('').text(file.name).appendTo(li); var img = $('').appendTo(li); $('').addClass('progress').text('0%').appendTo(li); li.get(0).file = file; // Создаем объект FileReader и по завершении чтения файла, отображаем миниатюру и обновляем // инфу обо всех файлах var reader = new FileReader(); reader.onload = (function(aImg) < return function(e) < aImg.attr('src', e.target.result); aImg.attr('width', 150); /* . обновляем инфу о выбранных файлах . */ >; >)(img); reader.readAsDataURL(file); >); >

Объект File содержит метаданные о файле, такие как его имя, размер и тип (в формате MIME, например, image/gif) соответственно в свойствах name, size и type. Для доступа же к содержимому файла существует специальный объект FileReader.

Читайте также:  File handling in python programming

Внутри функции displayFiles() мы проходимся по переданному массиву файлов и сначала отсеиваем те, которые не являются изображениями. Далее для каждого изображения создается элемент списка li, куда помещается пустой пока элемент img (обратите внимание, что в кажом элементе li также создается свойство file, содержащее соответствующий объект). После чего создается экземпляр FileReader и для него определяется обработчик onload, в котором данные передаются прямо в атрибут src созданного ранее элемента img. Метод readAsDataURL() объекта FileReader принимает параметром объект File и запускает чтение данных из него. В результате для всех выбранных через стандартное поле или перетащенных прямо в браузер картинок, мы видим их миниатюры (искусственно уменьшенные до 150 пикселей).

Что еще осталось сделать? Осталось только реализовать саму загрузку всех выбранных файлов на сервер. Для этого создадим какую-нибудь кнопку или ссылку, при нажатии на которую останется только пробежаться по всем созданным элементам li, прочитать их свойство file и передать в функцию uploadFile(), текст которой приведен ниже. Отмечу, что здесь для упрощения я реализовал загрузку через функцию, а в реальном примере, расположенном по адресу http://safron.pro/playground/html5uploader/, я собрал все действия по загрузке в объект uploaderObject, при создании которого можно передать дополнительные параметры, такие как функции обратного вызова для получения информации о процессе загрузки. 

function uploadFile(file, url) < var reader = new FileReader(); reader.onload = function() < var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(e) < if (e.lengthComputable) < var progress = (e.loaded * 100) / e.total; /* . обновляем инфу о процессе загрузки . */ >>, false); /* . можно обрабатывать еще события load и error объекта xhr.upload . */ xhr.onreadystatechange = function () < if (this.readyState == 4) < if(this.status == 200) < /* . все ок! смотрим в this.responseText . */ >else < /* . ошибка! . */ >> >; xhr.open("POST", url); var boundary = "xxxxxxxxx"; // Устанавливаем заголовки xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); xhr.setRequestHeader("Cache-Control", "no-cache"); // Формируем тело запроса var body = "--" + boundary + "\r\n"; body += "Content-Disposition: form-data; name='myFile'; filename='" + file.name + "'\r\n"; body += "Content-Type: application/octet-stream\r\n\r\n"; body += reader.result + "\r\n"; body += "--" + boundary + "--"; if(xhr.sendAsBinary) < // только для firefox xhr.sendAsBinary(body); >else < // chrome (так гласит спецификация W3C) xhr.send(body); >>; // Читаем файл reader.readAsBinaryString(file); >

Здесь создается экземпляр уже знакомого нам объекта FileReader, точно так же, как и выше; ему присваивается обработчик события onload, в котором создается XMLHttpRequest (к сожалению, пока нельзя воспользоваться ajax-интерфейсом jQuery, поскольку там еще не предусмотрена загрузка файлов). В XMLHttpRequest второй версии появилось свойство upload, содержащее объект-загрузчик, который может обрабатывать события progress, load и error (подробнее см. http://www.w3.org/TR/XMLHttpRequest2/#xmlhttprequesteventtarget). В примере выше показана только обработка события progress. Далее присваиваем обработчик завершения запроса самому реквесту (в отличие от событий объекта-загрузчика он вызывается уже тогда, когда все данные загружены и ответ от сервера получен), добавляем два дополнительных заголовка и формируем тело запроса, читая данные из свойства result объекта FileReader. После этого загрузка запускается. Отмечу только, что по нынешней спецификации W3C подразумевается, что метод send() объекта XMLHttpRequest может принимать в параметре бинарные данные, что успешно и реализовано в Google Chrome, однако в Firefox сделано по-своему, через особый метод sendAsBinary(). Поэтому перед началом отправки проверяем, определен ли метод sendAsBinary() в объекте реквеста, и, если да, используем его.

Читайте также:  Javascript получить подстроку из строки

Вот, собственно, и все. С нетерпением ждем утверждения и распространения html 5!

Кое-какие ссылки
  1. http://safron.pro/playground/html5uploader/ — работающий пример того, что описывалось выше (плюс еще кое-что)
  2. http://safron.pro/playground/html5uploader/full.zip — весь код целиком в архиве
  3. http://html5test.com — проверка браузеров на соответсвие html 5 (очень наглядно)
  4. http://playground.html5rocks.com — площадка для экпериментов с кодом от Google (ее интерфейс будет знаком тем, кто использовал многочисленные API Google)

UPD
Для упрощения использования всего вышеизложенного, был создан JQuery-плагин. При помощи него можно загружать файлы через File API там, где это возможно, и реализовать замену (например, обычную отправку формы) там, где нет. По просьбам трудящихся и соотносясь с замечаниями комментаторов, была добавлена загрузка через объект FormData в браузерах, которые его поддерживают (Chrome, Safari 5+, FF 4+). В самом верху файла с плагином есть описание параметров, методов, а также краткие примеры использования. Более полный пример использования можно увидеть здесь (это изначальный пример из этой статьи, только переделанный на использование плагина, его полный код, включая серверную часть, можно скачать здесь [see UPD2]).

Использованные источники
  1. https://developer.mozilla.org/en/using_files_from_web_applications — статья о файловом интерфейсе на сайте девелоперов Mozilla
  2. https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest — cтатья об использовании XMLHttpRequest там же
  3. http://www.w3.org/TR/FileAPI/ — текущая спецификация File API на сайте W3C
  4. http://www.w3.org/TR/XMLHttpRequest2/ — текущая спецификация XMLHttpRequest там же

UPD2
По просьбе пользователя glebovgin плагин был доработан таким образом, чтобы можно было отправлять не только непосредственно объект File, но также Blob-данные (объект Blob). Это может быть полезно, если есть необходимость отправлять на сервер, например, содержимое canvas, ну или просто вручную сгенерированные данные.

В демке (которая переехала немного на другой адрес) был добавлен пример отправки картинки из canvas. На данный момент эта возможность работает в FF, Chrome, IE10.

Читайте также:  Java loading screen thread

Исходный код ныне доступен на GitHub. Замечания, предложения, улучшения приветствуются!

Источник

Загрузка файлов

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Вид поля для загрузки файла в Firefox

Рис. 1. Вид поля для загрузки файла в Firefox

Загрузка файлов в Chrome

Рис. 2. Загрузка файлов в Chrome

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

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла
Атрибут Описание
accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
size Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
multiple Позволяет выбирать и загружать сразу несколько файлов.
name Имя поля, используется для его идентификации обработчиком формы.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

  1. задать метод отправки данных POST ( method=»post» );
  2. установить у атрибута enctype значение multipart/form-data .

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

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

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

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Табл. 2. Типы файлов

Значение Описание
image/jpeg Только файлы в формате JPEG.
image/jpeg,image/png Только файлы в формате JPEG и PNG.
image/* Любые графические файлы.
image/*,video/* Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 2.

Пример 2. Загрузка фотографий

       
Загрузите ваши фотографии на сервер

Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .

Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.

Загрузка файлов в Opera

Рис. 3. Загрузка файлов в Opera

Источник

Оцените статью
© 2023 Программирование