Отправка файлов

Последнее обновление: 08.04.2016

За выбор файлов на форме отвечает элемент input с атрибутом type="file":

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Отправка файлов в HTML5</title>
	</head>
	<body>
		<form enctype="multipart/form-data" method="post" action="http://localhost:8080/postfile.php">
			<p>
				<input type="file" name="file" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>
Выбор файла в HTML5

При нажатии на кнопку "Выберите файл" открывается диалоговое окно для выбора файла. А после выбора рядом с кнопкой отображается имя выбранного файла.

Важно отметить, что для отправки файла на сервер форма должна иметь атрибут enctype="multipart/form-data".

С помощью ряда атрибутов мы можем дополнительно настроить элементы выбора файла:

  • accept: устанавливает тип файл, которые допустимы для выбора

  • multiple: позволяет выбирать множество файлов

  • required: требует обязательной установки файла

Например, множественный выбор файлов:

<form enctype="multipart/form-data" method="post" action="http://localhost:8080/postfile.php">
	<p>
		<input type="file" name="file" multiple />
	</p>
	<p>
		<input type="submit" value="Отправить" />
	</p>
</form>

При нажатии на кнопку также открывается диалоговое окно для выбора файлов, только теперь, зажав клавишу CTRL или Shift, мы можем выбрать несколько файлов, а после выбора рядом с кнопкой отобразится количество выбранных файлов:

Множественный выбор файлов в HTML5

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850