Завантаження й оновлення: поле file в формах HTML

17

Від автора: завантаження файлів на веб-сторінках обробляється в полі input типу file. До недавнього часу у даного методу була одна серйозна проблема – завантаження не працювала на мобільних пристроях.

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

Основи

Сам елемент простіше нікуди:

Звичайно, сам по собі він не вживається, необхідна додаткова розмітка. По-перше, щоб отримані файли можна було обробити і передати на сервер. І по-друге, для доступності:

Upload your picture:

І ми одержуємо:

Завантаження й оновлення: поле file в формах HTML

Як і input типу color і інші елементи форми, поле типу file буде використовувати провідник операційної системи.

Обмеження

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

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

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

Налаштування

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

Upload your image

Додамо 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.3 rem; 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. Про нього я розповім в наступній статті.