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

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

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

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

Основы

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

<input type="file">

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

<form method="post" action="upload.php" formenctype="multipart/form-data">
    <label for="upload">Upload your picture:</label>
    <input type="file" name="upload" id="upload">
</form>

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

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

Ограничения

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

<input type="file" accept="image/*" name="upload" id="upload">

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

<input type="file" multiple accept="image/*" name="upload" id="upload">

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

Настройка

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

<label for="fileUpload" accept="image/*">Upload your image</label>
<input type="file" id="fileUpload">

Добавим JavaScript:

var fileUpload = document.getElementById("fileUpload"),
uploadLabel = document.querySelector("label[for='fileUpload']"),
fileInsert = document.createElement("button");
fileInsert.id = "fileSelector";
fileInsert.innerHTML = uploadLabel.innerHTML;
fileUpload.parentNode.insertBefore(fileInsert, fileUpload.nextSibling)
fileUpload.style.display = "none";
uploadLabel.style.display = "none";
fileInsert.addEventListener('click', function(e){
    e.preventDefault();
    fileUpload.click();
}, false);

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

#fileSelector {
    font-size: 1.3rem; padding: .5rem 1rem;
    background: hsl(50,100%,50%);
    font-family: Avenir, sans-serif;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree