Как сделать форму загрузки файла на сайте

Дата публикации: 2016-09-15

От автора: приветствую вас друзья. Из этой небольшой статьи вы узнаете, как сделать форму загрузки файла на сайте. Это позволит прикреплять картинки и прочие файлы к форме и отправлять файлы на сервер, где они уже будут обработаны. Начнем.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Начнем с создания формы, в которой будет присутствовать поле для загрузки файла. На что здесь стоит обратить внимание? Во-первых, поле для отправки файла должно иметь специальный тип – type=»file». Во-вторых, файл может быть отправлен только в теле запроса, поэтому метод GET для отправки формы не подойдет, нужно использовать только метод POST — method=»post». Ну и, в-третьих, для формы необходим специальный атрибут enctype с определенным значением — enctype=»multipart/form-data». Без этого атрибута файл просто не будет отправлен.

Исходя из озвученного выше, наш код будет примерно таким:

<form class="form-horizontal" method="post" enctype="multipart/form-data" action="file.php">
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">Название файла</label>
		<div class="col-sm-8">
			<input type="text" id="name" class="form-control" name="name" placeholder="Название файла">
		</div>
	</div>
	<div class="form-group">
		<label for="file" class="col-sm-2 control-label">Файл</label>
		<div class="col-sm-8">
			<input type="file" name="file" id="file">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
			<button type="submit" id="submit" class="btn btn-primary">Отправить</button>
			<div></div>
		</div>
	</div>
</form>

<label for="name" class="col-sm-2 control-label">Название файла</label>

</div>

</div>

<button type="submit" id="submit" class="btn btn-primary">Отправить</button>

</div>

</form>

В результате мы получим примерно такую форму:

Поле для загрузки файлов выглядит не очень привлекательно, но, тем не менее, со своей задачей справится без проблем: файл можно прикрепить и отправить на сервер. В следующей статье мы попробуем красиво оформить поле для загрузки файла, а пока давайте проверим, загружается ли файл. Как видим, форма будет отправлена в файл file.php, который указан в атрибуте action. Давайте создадим этот файл:

<?php
echo '<pre>';
print_r($_POST);
print_r($_FILES);

<?php

echo '<pre>';

print_r($_POST);

print_r($_FILES);

А вот и результат:

Как видим, файл успешно отправлен на сервер и доступен он в массиве $_FILES, именно оттуда необходимо обращаться на сервере к загружаемому файлу. Подробнее о работе с загруженным файлом вы можете прочесть в статье Загрузка изображений на сервер. Ну а на этом наша статья завершена. В следующей статье мы попробуем красиво оформить кнопку загрузки файла на сервер.

Метки: формы