Мультиаплоад - элемент input в html 5

01.06.2011 17:15

У элемента input в HTML 5 появился атрибут multiple, с помощью которого мы можем выбрать для загрузки несколько файлов. Этот атрибут принимает только одно значение «multiple», в живую будет выглядеть так:

<input type="file" multiple="multiple" name="files[]" /> 

Обратите внимание на name, мы явно в нем указали, что это массив.

Сразу появляется вопрос, какой браузер это новшество не понимает, ответ легко предсказуем, это семейство Internet Explorer. Начиная с 9 версии и ниже, они не поддерживают этот функционал и просто проигнорируют атрибут, искренне надеюсь что в финальной 10 версии они это поправят.

Кроме того что, мы дали пользователям загрузить сразу много файлов, мы должны позаботиться о них, и дать им возможность загрузит именно те файлы которые нам необходимы. И тут на помощь приходит еще один новый атрибут accept. Который принимает "MIME Media Types".

<input type="file" multiple="multiple" name="files[]" accept="image" /> 

Такой записью мы говорим о том, что загружать можно только картинки, и в окне выбора файлов сработает фильтр, который будет показывать пользователю только графические типы файлов. Firefox и Safari игнорируют accept.

И снова у нас появляется проблема, пользователь пытается отправить форму, но он был настолько занят, что забыл заполнить данными наш input. Мы не должны давать ему повода нервничать и волноваться, и будем в такой ситуации использовать еще один новый атрибут.

Атрибут required, принимает строку «required», и делает поле обязательным для заполнения.

<input type="file" multiple="multiple" name="files[]" accept="image" required="required" title="Необходимо выбрать минимум один файл" />

Как это будет работать, при попытке отправить форму с пустым input, появится предупреждение о ошибке с следующим текстом:

Firefox:
firefox_input_html5

Chrome:
chrome_input_html5

Opera:
opera_input_html5

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

У нас осталось несколько проблем, которые нужно решить для удобства пользователя.

Еще раз проверить тип файла
Размеры файлов
Количество файлов

И у нас есть очень простой способ это все проверить с помощью любимого JavaScript. В элементе input с типом file содержится невидимый атрибут files, при обращении к которому мы получаем объект FilleList, если input не пустой, иначе undefined.

var inputFile = document.getElementById('input').files;

// вернет объект

FileList : {

 0,

 1,

 2,

 length: 3,

 item

}

Где 0,1,2 это ключи загружаемых файлов.
Length, количество файлов.
Метод item() принимающий ключ файла.

Обратиться к файлу можно двумя способами:

// Первый способ

var file = inputFile[0];

// Второй

var file = inputFile.item(0);

В переменной file будет содержаться объект файла:

File : {

 constructor: File {...},

 fileName: 'image.png',      // имя файла

 fileSize: 879394,              // размер файла

 name: 'image.png',          // имя файла

 size: 879394,                  // размер файла

 type: 'image/png',           // MIME тип файла

 getAsBinary,

 getAsDataURL,

 getAsText,

 lastModifiedDate: 'Thu May 26 2001 21:34:48 GMT+0300 (Eastern Europe Daylight Time)'

}

У Оперы нет свойств fileSize, FileName но зато есть name и size. В Chrome, Firefox, Safari есть все четыре свойства.

Только в Chrome есть свойство lastModifiedDate.

Заострим внимание на трех методах.

getAsBinary: получить исходный код файла.
getAsDataURL: получить данные преобразованные в base64
getAsText: тут я каюсь, до сих пор не разобрался что это, и буду очень благодарен если разъясните мне.

На мой взгляд getAsDataURL, очень полезная штука, как пример можно показать превью файлов для загрузки, не отправляя нечего на сервер.

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

Ресурс который мне помог узнать и понять вышеизложенное про новые возможности input .

Источник