Выбор файла
В HTML элемент управления выбором файла — это компонент веб-формы , с помощью которого пользователь может выбрать локальный файл. Когда форма отправляется (возможно, вместе с другими данными формы), файл загружается на веб-сервер . Там при поступлении файла обычно происходит какое-то действие, например сохранение файла на веб-сервере. Однако конкретное действие определяется серверным сценарием , которому передается форма.
Пример кода
[ редактировать ]Ниже приведен пример кода веб-формы с элементом управления выбором файла. Это input элемент с type="file" который создает элемент управления выбором файла.
<form action="form-handler.php" method="post" enctype="multipart/form-data"> <div> <input id="myfile" name="myfile" type="file"> <input value="Upload ►" type="submit"> </div></form>Рендеринг
[ редактировать ]Когда дело доходит до рендеринга на экране элемента управления выбором файла, в разных веб-браузерах существуют некоторые различия . Обычно на платформе Windows пользовательские агенты отображают элемент управления выбором файла в виде текстового поля вместе с кнопкой «Обзор». При нажатии кнопки «Обзор» открывается файловый диалог , с помощью которого можно осуществить фактический выбор файла на своей платформе. После выбора имя выбранного файла отображается в текстовом поле. Альтернативно, вместо использования кнопки «Обзор», имя файла можно ввести непосредственно в текстовое поле.
Некоторые браузеры, особенно Firefox , [1] больше нельзя вводить имя файла напрямую. Это мера безопасности — можно обманом заставить пользователя загрузить конфиденциальную информацию. [2]
Функциональность
[ редактировать ]Механизм загрузки файлов на основе форм был первоначально предложен в RFC 1867 (опубликован в ноябре 1995 г.) как расширение HTML 2.0 (RFC 1866) после его публикации. Загрузка файлов на основе форм затем была включена в HTML 3.2, который явно ссылается на RFC 1867 для получения дополнительной информации о загрузке файлов на основе форм.
HTML 4.01 сам по себе не описывает, как должен работать элемент управления выбором файла, но в нем указаны RFC 2388 и RFC 1867 в качестве ссылок. [3]
Выбор нескольких файлов
[ редактировать ]Целью RFC 1867 является то, что один элемент управления выбором файла должен позволять выбирать несколько файлов. Это намерение, кажется, отражено в HTML 4.01, который для типа элемента управления выбора файла гласит: [4]
Этот тип управления позволяет пользователю выбирать файлы, чтобы их содержимое можно было отправить с помощью формы. Элемент INPUT используется для создания элемента управления выбором файла.
Было отмечено [5] что слово «файлы» во множественном числе в приведенной выше цитате указывает на то, что в HTML 4.01 элемент управления выбором одного файла по-прежнему должен был обрабатывать выбор нескольких файлов, а не только одного файла.
Эта ситуация проясняется в HTML5 путем добавления атрибута Multiple, когда входной файл должен принимать несколько файлов. Текущий проект определяет новое поведение:
Если атрибут Multiple не установлен, в списке выбранных файлов не должно быть более одного файла. [6]
Принять атрибут
[ редактировать ]RFC 1867 также представил accept атрибут для input элемент. Это позволит фильтровать типы файлов на основе типа MIME для элемента управления выбором файла.
Кроме того, предлагается, чтобы тег INPUT имел атрибут ACCEPT, который представляет собой список типов мультимедиа, разделенных запятыми.
Если атрибут ACCEPT присутствует, браузер может ограничить запрашиваемые шаблоны файлов, чтобы они соответствовали соответствующим шаблонам.соответствующие расширения файлов для платформы.
Таким образом, пользовательский агент может ограничить выбор файлов, как, например, в следующем примере, ограничиваясь изображениями GIF и PNG или любыми изображениями:
<input id="myfile" name="myfile" type="file" accept="image/gif,image/png"><input id="myfile" name="myfile" type="file" accept="image/*">На платформе Windows это может означать, что пользовательский агент будет отображать файлы только тех типов, которые указаны в диалоговом окне просмотра файлов.
Ограничения браузера
[ редактировать ]Базовая поддержка элемента управления выбором файла была быстро принята поставщиками браузеров. Например, уже Internet Explorer 4, [7] Netscape Navigator 2.0 и Opera 3.5 [8] признал input элемент type="file" в качестве элемента управления выбором файла.
Однако большинство современных браузеров по-прежнему не реализуют элемент управления выбором файлов так, как это было задумано, или не имеют определенных функций. [5]
Невозможно выбрать несколько файлов
[ редактировать ]Загрузка нескольких файлов на основе форм с помощью одного элемента управления выбором файла поддерживается в текущих версиях Chrome, Firefox, Internet Explorer, Safari и Opera. Один источник утверждает [5] что Opera поддерживает выбор нескольких файлов с помощью одного элемента управления выбором файлов. Это справедливо для версий Opera, начиная с 3.5, в которых появилась возможность загрузки файлов. [8] Однако с первой бета-версией Opera 7 эта функция стала недоступна. Firefox версии 3.6 начал поддерживать выбор нескольких файлов, [9] предоставляя разработчику ограниченный доступ к самим файлам перед их загрузкой на сервер через API файлов HTML5 . [10] Эта функция также позволяет пользователям перетаскивать файлы из внешних приложений (таких как Проводник Windows ) непосредственно в веб-приложение. Ярким примером поддержки этой функции является Gmail , позволяющий добавлять вложения таким способом.
HTML5 позволяет загружать несколько файлов, используя атрибут Multiple в элементах ввода. [11]
Альтернатива JavaScript
[ редактировать ]Одним из решений является использование сценариев на стороне клиента, таких как JavaScript, для создания дополнительного элемента управления выбором файла для каждого файла, который пользователь выбирает для загрузки. Используя CSS , эти дополнительные элементы управления выбором файлов могут быть отключены от отображения. Пример этой техники продемонстрирован в плагине Multiple File Upload для jQuery . Таким образом, проблема загрузки нескольких файлов решается за счет предоставления столько элементов управления выбором файлов, сколько у пользователя есть файлов для загрузки. Тем не менее, это не решает проблему выбора нескольких файлов для загрузки в Internet Explorer.
Принять поддержку атрибутов
[ редактировать ]Атрибут принятия в настоящее время поддерживается Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ и Microsoft Internet Explorer 10+.
Ссылки
[ редактировать ]- ^ «388784 – (CVE-2007-3511) Уязвимость кражи фокуса ввода файла Firefox» . Bugzilla.mozilla.org . Проверено 2 сентября 2013 г.
- ^ «Уязвимость загрузки файла события OnKeyDown в Mozilla Firefox» . Джунипер.нет. 15 ноября 2010 г. Архивировано из оригинала 21 февраля 2013 г. Проверено 2 сентября 2013 г.
- ^ «Справочники по спецификациям HTML 4» . W3.org . Проверено 2 сентября 2013 г.
- ^ «Формы в HTML-документах» . W3.org . Проверено 2 сентября 2013 г.
- ^ Jump up to: а б с «Ввод файла (или «загрузка») в HTML-формы» . Cs.tut.fi. Проверено 2 сентября 2013 г.
- ^ «Спецификация HTML 5.1» . W3C.
- ^ «тип ввода = объект файла» . Msdn2.microsoft.com. 22 июля 2013 г. Проверено 2 сентября 2013 г.
- ^ Jump up to: а б «История браузера: Opera» . Blooberry.com . Проверено 2 сентября 2013 г.
- ^ 10 декабря 2009 г., автор Поль Руже (10 декабря 2009 г.). «Ввод нескольких файлов в Firefox 3.6 ✩ Mozilla Hacks — блог веб-разработчиков» . Hacks.mozilla.org . Проверено 2 сентября 2013 г.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка ) - ^ «Использование файлов из веб-приложений — MDC» . Разработчик.mozilla.org. 23 августа 2013 г. Проверено 2 сентября 2013 г.
- ^ Спецификация HTML 5.1: 4.10.5.3 Общие атрибуты входных элементов