Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
Рис. 2. Загрузка файлов в Chrome
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
Атрибут | Описание |
---|---|
accept | Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. |
size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. |
multiple | Позволяет выбирать и загружать сразу несколько файлов. |
name | Имя поля, используется для его идентификации обработчиком формы. |
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
- задать метод отправки данных POST ( method=»post» );
- установить у атрибута enctype значение multipart/form-data .
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
HTML5 IE Cr Op Sa Fx
Отправка файла на сервер
Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.
Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept .
Значение | Описание |
---|---|
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 несколько изменился вид поля.
Рис. 3. Загрузка файлов в Opera
Загрузка файлов
Для загрузки на сервер одного или нескольких файлов вроде фотографий, документов и видео применяется специальное поле формы. В браузере IE такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari, Opera и Chrome доступна только кнопка «Выбрать файлы» (рис. 2), в Firefox это только кнопка «Обзор» (рис. 3).
Рис. 1. Вид поля для загрузки файла в IE
Рис. 2. Загрузка файлов в Opera и Chrome
Рис. 3. Загрузка файлов в Firefox
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
Атрибут | Описание |
---|---|
name | Имя поля; используется для его идентификации обработчиком формы. |
disabled | Блокирует поле для отправки файлов. |
form | Идентификатор формы для связывания поля с элементом . |
type | Для загрузки файлов значение должно быть file . |
accept | Устанавливает фильтр на типы файлов, которые вы можете открыть через поле загрузки файлов. |
autofocus | Поле получает фокус после загрузки документа. |
required | Указывает, что поле является обязательным для заполнения. |
multiple | Позволяет выбирать и загружать сразу несколько файлов. |
Для отправки файлов в форме необходимо сделать следующее:
- задать метод отправки данных POST ( method=»post» );
- установить у атрибута enctype значение multipart/form-data .
Кроме того, данное поле нельзя вставлять внутрь ссылки и кнопки.
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
Атрибут multiple важен, он позволяет не ограничиваться одним файлом для выбора, а указать сразу несколько файлов для одновременной загрузки (пример 2). Выбор нескольких файлов происходит с помощью мыши или клавиатуры через клавиши Ctrl и Shift .
Пример 2. Загрузка нескольких файлов
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept .
Значение | Описание |
---|---|
image/jpeg | Только файлы в формате JPEG. |
image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
image/* | Любые графические файлы. |
image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 3.
Пример 3. Загрузка фотографий
Значение file
Тип file (от англ. «file» ‒ «файл») создаёт поле выбора файла(-ов). Если поле принадлежит форме, то тогда файлы прикреплённые к данному полю так же прикрепляются и к форме (в качестве данных формы), и в случае отправки данных формы так же отправляются на сервер.
Внешний вид
‒ поле выбора файла;
‒ фокус;
‒ наведение курсора;
‒ активация.
Хочу красивую кнопку загрузки файлов
Всем привет. Сегодня затронем тему как сделать красивую кнопку загрузки файлов.Ну обычными способами оформить кнопки выбора файла нельзя,но есть небольшой приёмчик,которым мы воспользуемся.
И так приступим.
У нас есть поле
Которое и является нашей кнопкой загрузки .
Далее добавляем label, это нам понадобится для оформления.
Вот так должно получится
Теперь займемся стилями
1.Скрываем поле file:
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
>
И так у нас на странице остался только label, Вот его и будем оформлять.
2.Добавляем стилей для label
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
cursor: pointer;
>
.inputfile:focus + label,
.inputfile + label:hover {
background-color: red;
>
По умолчанию элемент label не кликабельный, и мы добавили параметр cursor со значением pointer.
Элемент label не выделяется клавиатурой tab, сделаем так, чтобы его можно было выделять посредством клавиатуры, таким же образом, как это можно сделать для стандартных полей ввода.
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
>
Теперь что касается описания кнопки выбора файла. Сделаем так, чтобы при выборе одного файла кнопка отображала его имя, при выборе нескольких – показывалось общее количество файлов. Реакцию на выбор пользователя мы запрограммируем на javascript, а так же воспользуемся библиотекой JQuery.
Подготовим скрытое поле, для работы с ним:
files selected" multiple />
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count>', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
>);
>);
Что делать, если javasvript отключен в браузере?
Редко, но случается, что в браузере может быть выключен код javascript, что делать в этом случае? Ничего не остается, кроме того, чтобы вернуть видимость скрытому полю выбора файла.