От автора: загрузка файлов на веб-страницах обрабатывается в поле input типа file. До недавнего времени у данного метода была одна серьезная проблема – загрузка не работала на мобильных устройствах.
С этого месяца загрузка файлов поддерживается в iOS9 и Android 5, что существенно облегчает жизнь. Со временем, вероятнее всего, встроенная поддержка загрузки файлов заменит специальные приложения. А значит настало время рассмотреть данный элемент повнимательнее.
Основы
Сам элемент проще некуда:
|
1 |
<input type="file"> |
Конечно, сам по себе он не употребляется, необходима дополнительная разметка. Во-первых, чтобы полученные файлы можно было обработать и передать на сервер. И во-вторых, для доступности:
|
1 2 3 4 |
<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 с добавлением *:
|
1 |
<input type="file" accept="image/*" name="upload" id="upload"> |
Файлы, не совпадающие с критерием поиска (в примере выше – любые файлы кроме изображений), будут выделены серым цветом или будут скрыты. На данный момент в iOS поддерживается поиск файлов по маске, кроме отдельных форматов. Например, image/png. Также можно разрешить загрузку нескольких файлов за раз, добавив атрибут multiple:
|
1 |
<input type="file" multiple accept="image/*" name="upload" id="upload"> |
В iOS на данный момент не поддерживается загрузка нескольких форматов одновременно. Файлы можно загружать из определенных хранилищ: фото с камеры, фото из ленты, из онлайн хранилищ типа iCloud и DropBox.
Настройка
Input’ы типа file это обычные поля, в них нет ничего красивого, и их толком нельзя изменить с помощью CSS (хотя можно). Однако есть хитрый способ, как спрятать настоящий input и на его место поставить свой элемент, который будет работать абсолютно так же. Сперва, создадим файловый input и ниже кнопку button:
|
1 2 |
<label for="fileUpload" accept="image/*">Upload your image</label> <input type="file" id="fileUpload"> |
Добавим JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
|
1 2 3 4 5 6 7 8 9 |
#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. О нем я расскажу в следующей статье.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
