пятница, 9 сентября 2011 г.

Множественная загрузка файлов с помощью HTML5

В некоторых формах, хочется позволять загружать сразу несколько файлов.
Раньше были только следующие варианты сделать это:
  1. Использовать флэш + js http://swfupload.org/
    Тут возникает много всяких трудностей и появляются всякие подводные камни, начиная с того, что флэш установлен не у всех, а заканчивая тем, что если вы хотите позволять загружать файлы только авторизованным пользователям, то вам нужно еще как-то передавать PHPSESSID (ну или другой идентификатор сессии), однако нужная сессия может не стартануть из-за настроек безопасности сервера (в частности из-за Suhosin).  Поэтому этот вариант всегда требует альтернативного способа.
  2. Есть еще один вариант: сначала показывать один <input type="file" name="files[]" />, а рядом добавить кнопочку еще один файл, по которой с помощью javascript создавать новый элемент input и добавлять его на страницу. Тут всё прозрачно, но не очень юзабельно для пользователя, ведь намного удобнее сразу выбрать несколько файлов и один раз нажать кнопку ОК.
Возможно есть и другие достаточно извращённые варианты реализации массовой загрузки файлов, но все они либо доставляют проблемы разработчикам/админам, либо неудобства пользователю.

С появлением HTML5 эта задача сильно упростилась, потому что у <input type="file" /> появился новый атрибут multiple (http://dev.w3.org/html5/markup/input.file.html).
Чтобы реализовать множественную загрузку файлов, достаточно прописать этот атрибут у нужного элемента.

Простейший пример:
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="" />
    <br />
    <input type="submit" />
</form>
Это будет работать во всех современных браузерах: Google Chrome, Firefox, Opera.

Комментариев нет: