Загрузка и обновление: поле file в HTML формах

Загрузка и обновление: поле file в HTML формах

От автора: загрузка файлов на веб-страницах обрабатывается в поле input типа file. До недавнего времени у данного метода была одна серьезная проблема – загрузка не работала на мобильных устройствах.

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

Основы

Сам элемент проще некуда:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

И мы получаем:

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

Ограничения

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

Файлы, не совпадающие с критерием поиска (в примере выше – любые файлы кроме изображений), будут выделены серым цветом или будут скрыты. На данный момент в iOS поддерживается поиск файлов по маске, кроме отдельных форматов. Например, image/png. Также можно разрешить загрузку нескольких файлов за раз, добавив атрибут multiple:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В iOS на данный момент не поддерживается загрузка нескольких форматов одновременно. Файлы можно загружать из определенных хранилищ: фото с камеры, фото из ленты, из онлайн хранилищ типа iCloud и DropBox.

Настройка

Input’ы типа file это обычные поля, в них нет ничего красивого, и их толком нельзя изменить с помощью CSS (хотя можно). Однако есть хитрый способ, как спрятать настоящий input и на его место поставить свой элемент, который будет работать абсолютно так же. Сперва, создадим файловый input и ниже кнопку button:

Добавим JavaScript:

Результат можно посмотреть в начале оригинальной статьи: скрипт прячет настоящий файловый input, а сверху отображается элемент button; при клике на кнопку срабатывает событие нажатия на файловый input. А кнопку уже можно настроить как угодно с помощью CSS:

Только начало

Конечно, это только клиентская сторона: есть и другие способы, которые по-настоящему обрабатывают файлы от HTML5 API в JS до PHP. Сегодня мы рассмотрели самый простой способ; а в следующих статьях мы более подробно разберем загрузку файлов. Также существуют и другие способы взаимодействия с загрузкой файлов, среди них интерфейс drag-and-drop. О нем я расскажу в следующей статье.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree