Руководство по HTML5
Адам Фриман
Использование элемента input для загрузки файлов
И, наконец, последним типом элемента input
является file
, который позволяет загружать файлы как часть формы на сервер. Этот тип input
поддерживает дополнительные атрибуты, приведенные в таблице 13-15.
Таблица 13-15: Дополнительные атрибуты, доступные для типаfile
элементаinput
Атрибут | Описание | Новый в HTML5 |
accept |
Определяет набор MIME-типов, которые будут приняты. RFC2046 определяет MIME типы (http://tools.ietf.org/html/rfc2046). | Нет |
multiple |
Этот атрибут указывает, что элемент input может загрузить несколько файлов. Когда я писал эту книгу, ни один из основных браузеров не поддерживал этот атрибут. |
Да |
required |
Указывает, что пользователь обязан ввести значение в целях проверки входных данных. Для подробностей см. главу 14. | Да |
В листинге 13-17 показано, как используется тип file
элемента input
.
Листинг 13-17: Использование типаfile
элементаinput
для загрузки файла
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form"
enctype="multipart/form-data">
<input type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Favorite Fruit:
<input type="text" id="fave" name="fave" />
</label>
</p>
<p>
<input type="file" name="filedata" />
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Вы можете загружать файлы только тогда, когда типом кодировки для формы является multipart/form-data
. Как вы видите, для установки кодировки я использовал атрибут enctype
элемента form
. На рисунке 13-23 показано, как браузер отображает элемент input
.
Рисунок 13-23: Типfile
элементаinput
Когда пользователь нажмет кнопку Choose File
(Выбрать файл), он увидит диалоговое окно, которое позволяет выбрать файл. При отправке формы содержимое файла будет передано на сервер.