Html загрузка файла только jpg

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

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

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

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

Рис. 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. Загрузка фотографий

Источник

Input file. Упрощаем пользователю выбор файла для загрузки на сервер

Довольно часто в html формах присутствует поле типа file (). Чаще всего это поля предназначено для загрузки определенного типа файлов, например изображений, архивов или документов (doc, docx, xls, xlsx, pdf, . ). Но при выборе файла с компьютера пользователь видит все доступные ему файлы как нужного типа так и нет.

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

Для установки фильтра в поле загрузки файла необходимо добавить атрибут accept. Атрибут «accept» (от англ. «accept» — «признавать, допускать») указывает (через запятую) список типов файлов, которые можно отправлять на сервер.

Пример использования атрибута accept:

Для примера установим фильтр для загрузки файлов с расширением .jpeg, .jpg:

Установим фильтр для загрузки изображений с расширением .jpeg, .jpg, .png, .gif :

Еще один пример, установим фильтр для загрузки любых изображений:

Внимание! Opera не понимает значения, если они разделены пробелом (accept=»image/jpeg, image/png, image/gif»).

Часто используемые значения атрибута accept

Изображение

Тип	Значение параметра accept	Расширение
*	image/*	все типы изображений
jpeg	image/jpeg	.jpeg, .jpg
png	image/png	.png
gif	image/gif	.gif
tiff	image/tiff	.tiff
vnd.adobe.photoshop	image/vnd.adobe.photoshop	.psd
vnd.microsoft.icon	image/vnd.microsoft.icon	.ico

Видео

Тип	Значение параметра accept	Расширение
*	video/*	все типы видео
avi	video/msvideo,video/avi,video/x-msvideo	.avi
mp4	video/mp4	.mp4, .mpg4
mpeg	video/mpeg	.mpeg
3gpp	video/3gpp	.3gp, .3gpp
ogg	video/ogg	.ogv

Аудио

Тип	Значение параметра accept	Расширение
*	audio/*	все типы аудио
mp4	audio/mp4	.mp4, .mpg4
mp3	audio/mpeg3	.mp3
mpeg	audio/mpeg	.mp1, .mp2, .mp3
ogg	audio/ogg	.oga, .ogg, .spx

Другое

Тип	Значение параметра accept	Расширение
zip	application/zip	.zip
rar	application/x-rar-compressed	.rar
gzip	application/gzip	.gz
7-Zip	application/x-7z-compressed	.7z
pdf	application/pdf	.pdf
doc	application/msword	.doc
rtf	application/rtf	.rtf
xls	application/vnd.ms-excel	.xls
pdf	application/pdf	.pdf
swf	application/x-shockwave-flash	.swf
sql	application/sql	.sql
javascript	application/javascript	.js
css	text/css	.css
html	text/html	.html, .htm, .shtml
txt	text/plain	.txt
xml	text/xml	.xml
csv	text/csv	.csv

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хотя можно установить ширину поля через атрибут 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. Загрузка фотографий

См. также

• Выравнивание элементов форм
• Кнопки
• Кнопки
• Отправка данных формы
• Переключатели
• Переключатели
• Поле для ввода пароля
• Поле для пароля
• Пользовательские формы
• Построение форм
• Скрытое поле
• Стилизация переключателей
• Стилизация флажков
• Сумасшедшие формы
• Текстовое поле
• Текстовое поле
• Флажки
• Флажки
• Формы в Bootstrap 4
• Формы в HTML

Источник