Главная страница   /   13.8. Использование элемента input для загрузки файлов (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

13.8. Использование элемента 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 (Выбрать файл), он увидит диалоговое окно, которое позволяет выбрать файл. При отправке формы содержимое файла будет передано на сервер.