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

Как загрузить файл на сайт html

  • автор:

Загрузка файлов

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Вид поля для загрузки файла в Firefox

Рис. 1. Вид поля для загрузки файла в Firefox

Загрузка файлов в Chrome

Рис. 2. Загрузка файлов в Chrome

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

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла

Атрибут Описание
accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
size Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
multiple Позволяет выбирать и загружать сразу несколько файлов.
name Имя поля, используется для его идентификации обработчиком формы.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

  1. задать метод отправки данных POST ( method=»post» );
  2. установить у атрибута enctype значение multipart/form-data .

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

HTML5 IE Cr Op Sa Fx

    Отправка файла на сервер   

Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Табл. 2. Типы файлов

Значение Описание
image/jpeg Только файлы в формате JPEG.
image/jpeg,image/png Только файлы в формате JPEG и PNG.
image/* Любые графические файлы.
image/*,video/* Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 2.

Пример 2. Загрузка фотографий

HTML5 IE 10+ Cr Op Sa Fx

    Загрузка файла   

Загрузите ваши фотографии на сервер

Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .

Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.

Загрузка файлов в Opera

Рис. 3. Загрузка файлов в Opera

Загрузка файлов

Для загрузки на сервер одного или нескольких файлов вроде фотографий, документов и видео применяется специальное поле формы. В браузере IE такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari, Opera и Chrome доступна только кнопка «Выбрать файлы» (рис. 2), в Firefox это только кнопка «Обзор» (рис. 3).

Вид поля для загрузки файла в IE

Рис. 1. Вид поля для загрузки файла в IE

Загрузка файлов в Opera и Chrome

Рис. 2. Загрузка файлов в Opera и Chrome

Загрузка файлов в Firefox

Рис. 3. Загрузка файлов в Firefox

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

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла

Атрибут Описание
name Имя поля; используется для его идентификации обработчиком формы.
disabled Блокирует поле для отправки файлов.
form Идентификатор формы для связывания поля с элементом .
type Для загрузки файлов значение должно быть file .
accept Устанавливает фильтр на типы файлов, которые вы можете открыть через поле загрузки файлов.
autofocus Поле получает фокус после загрузки документа.
required Указывает, что поле является обязательным для заполнения.
multiple Позволяет выбирать и загружать сразу несколько файлов.

Для отправки файлов в форме необходимо сделать следующее:

  1. задать метод отправки данных POST ( method=»post» );
  2. установить у атрибута enctype значение multipart/form-data .

Кроме того, данное поле нельзя вставлять внутрь ссылки и кнопки.

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

Атрибут multiple важен, он позволяет не ограничиваться одним файлом для выбора, а указать сразу несколько файлов для одновременной загрузки (пример 2). Выбор нескольких файлов происходит с помощью мыши или клавиатуры через клавиши Ctrl и Shift .

Пример 2. Загрузка нескольких файлов

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Табл. 2. Типы файлов

Значение Описание
image/jpeg Только файлы в формате JPEG.
image/jpeg,image/png Только файлы в формате JPEG и PNG.
image/* Любые графические файлы.
image/*,video/* Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 3.

Пример 3. Загрузка фотографий

Загрузка файлов на сайт: PHP, AJAX, HTML5 и Drag’n’Drop

Скучные формы загрузки — прошлый век. HTML5 дает возможности, чтобы добавить Drag’n’Drop, а AJAX позволяет загружать файлы без обновления страницы.

Евгений Кучерявый

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

В основном пользователи смотрят или скачивают информацию с сайтов, но иногда им может быть нужно что-нибудь загрузить самим. Это может быть аватарка, архив с документами, песня, видео со свадьбы или статья в формате .docx.

Программисту нужно позаботиться о том, чтобы посетитель смог сделать это максимально удобно. Загрузить файл на сайт можно и с помощью обычной формы и обработчика на PHP, но с выходом HTML5 появились другие интересные возможности — в этой статье мы поговорим и о базовых функциях, и о нововведениях.

Загрузка файлов на PHP

Начать следует с создания формы:

Форма уже функционирует: можно выбирать или перетаскивать файлы, а после нажатия на кнопку «Загрузить» данные отправятся в обработчик. Там они попадают в многомерный супермассив $_FILES. Его структура выглядит так:

  • имя поля, через которое загружен файл;
  • name — имя загружаемого файла;
  • type — тип в формате MIME-type;
  • size — объем в байтах;
  • tmp_name — временный адрес;
  • error — номер ошибки, если она произошла.

Если через одно поле загружается сразу несколько файлов, то получение доступа к какому-то конкретному происходит следующим образом: $_FILES[‘file’][‘name’][0] — индекс файла находится в самом конце.

Сначала нужно провести несколько проверок, и только потом перемещать файлы из временного хранилища непосредственно на сайт. Иначе может получиться так, что взломщики загрузят на сайт PHP-файлы и смогут их запустить, чтобы получить доступ к базе данных или к файловой системе сервера.

Вот как выглядит обработчик:

Заключение

Дальше с файлами можно делать все что угодно:

  • использовать изображения в статьях и в качестве аватарок;
  • добавить плеер, который будет воспроизводить видео и аудио;
  • создать текстовый, графический или аудио/видеоредактор;
  • разрешать скачивать файлы по ссылке и так далее.

Читайте также:

  • Что нельзя сделать без JavaScript
  • In Kotlin we trust: как устроено комьюнити перспективного языка программирования
  • Как адаптировать сайт под разные разрешения

3aгpyзкa файлов на ваш Web-сайт

Если вам нужен интерфейс для загрузки файлов на ваш Web-сайт с удаленного компьютера, то вы можете создать его из двух частей: формы и сценария РНР. В этой главе вы узнаете, как выполнить следующие действия:

Что тaкoe зaгpyзкa файла на Web-сервер?

Процесс загрузки файла на Web-сервер через HTML-форму является загадкой для многих людей. Уделим немного времени для объяснения этого процесса.

Чтобы начать процесс загрузки, вам необходимо следующее:

Сам по себе процесс загрузки представляет собой следующую последовательность действий:

Пользователь РНР (пользователи, которые запустили РНР, с такими именами, как «nobody», «www» или «joe») должны иметь право записи файла во временную папку, так же как и в результирующую папку.

В следующем знакомстве мы начнем создание простой HTML-формы.

Создание формы

Начнем создание формы с одним полем ввода. Вы можете создать форму для загрузики такого количества файлов, которое впоследствии планируете получать, используя последовательность действий при работе с одним файлом.

Параметр ENCTYPE используется потому, что мы будем отправлять больше, чем просто текст. Предположим, что вы будете загружать файл с изображением, поэтому назовем поле ввода имени файла в форме img1.

Параметр TYPE=»file» в поле ввода формы будет отображаться, как попе ввода с кнопкой Обзор. Кнопка Обзор запускает файловый менеджер, с помощью которого вы можете выбрать файл для загрузки.

http://localhost/upload_form.html

и нажмите клавишу Enter.

Браузер загрузит страницу Загрузка файла (Рис. 6.1).

Рис. 6.1. Страница Загрузка файла

На Рис. 6.2 вы видите форму загрузки файла с полем ввода и кнопками Обзор и Загрузить на сервер. В следующем упражнении вы создадите сценарий для обработки этой формы.

Создание сценария загрузки.

Перед началом создания сценария запомните список переменных, которые создаются автоматически после успешной загрузки файла. Основная часть имени переменных — img1 — является именем поля ввода созданной в предыдущем знакомстве формы.

Целью создаваемого сценария является следующее: взять загруженный файл, скопировать его в папку для документов Web-сервера и вернуть подтверждающее сообщение пользователю, содержащее все переменные из указанного выше списка.

Если значение $imgl_name не пустое, нужно выполнить функцию копирования. Применим символ @ перед именем функции, чтобы подавить предупреждения, и используем функцию die( ), чтобы вызвать завершение сценария и отобразить сообщение о том, что функция сору( ) закончилась неудачей:

Рис. 6.2. Файл сценария do_upload.php

Загрузкa файла с помощью формы и сценария

Теперь, когда вы создали форму и сценарий для загрузки файла, проверим, как все это работает.

Запустите свой Web-браузер, в поле ввода Адрес введите

и нажмите клавишу Enter. Браузер загрузит страницу Загрузка файла (Рис. 6.1). Нажмите кнопку Обзор. На экране появится диалог Выбор файла (Рис. 6.3).

Рис. 6.3. Диалог Выбор файла

Рис. 6.4. Сообщение об успешном завершении загрузки файла

Файл pic6_3.gif был выбран для примера, имя вашего файла будет отличаться от использованного здесь имени.

Рис. 6.5. Диалог Открыть

Окно браузера отобразит загруженный на ваш Web-сервер файл (Рис. 6.6).

Рис. 6.6. Файл, который был загружен с использованием созданного сценария

Для поиска файла вы также можете использовать кнопку Обзор диалога Oткрыть (Рис. 6.6).

Простой счетчик обращений

Сценарий, который вам предстоит создать в этом упражнении, подсчитывает количество обращений к web-странице, на которой он находится.

Полный листинг, созданного вами файла, должен выглядеть так как приведенный листинг на рис. 6.7

Рис 6.7. Листинг счетчика обращений к Web-страничке.

и нажмите клавишу Enter. В рабочее окно браузера будет загружена страничка с сообщением о количестве обращений к ней. Нажмите несколько раз на кнопку Обновить, имитируя новые обращения к страничке. Счетчик на страничке будет исправно подсчитывать все новые и новые обращения к ней (рис 6.8).

Рис 6.8 Страничка подсчитывающая своих пользователей


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *