Статьи

HTML5 File Drag, Drop, Анализировать, Читать и Загружать

Октябрь 12, 2018

Это была занятая неделя. Мы обнаружили, как новые HTML5 API могут помочь нам открывать, читать и загружать файлы, которые пользователь перетаскивал в окно браузера. Эта статья суммирует методы и текущий уровень поддержки браузера.

Поддержка HTML5 API

Ваш JavaScript-код должен проверять наличие объектов File, FileList и FileReader перед подключением обработчиков событий. На момент написания они поддерживаются последними версиями Chrome, Firefox и Opera: 


if (window.File && window.FileList && window.FileReader) { ... }

Хотя Opera поддерживает эти объекты, они могут использоваться только через стандартный ввод файла, а не перетаскивание. Поэтому требуется дополнительная проверка; Я предлагаю использовать метод загрузки XMLHttpRequest2, например 

 
var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

File Drag & Drop

Все браузеры (кроме тех, что на iPhone и iPad) поддерживают тип ввода файла, который отображает знакомую кнопку «Обзор». Атрибут «множественный» был введен в HTML5, и мы можем прикрепить обработчик события изменения к полю: 

 
document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

Chrome и Firefox также позволяют пользователям перетаскивать один или несколько файлов на выбранный элемент. Вы можете добавить обработчики событий, включая «dragover» и «dragleave» (для изменения стилей) и «drop» для обнаружения пропущенных файлов, например 

 
document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

Получение объекта FileList

Объект HTML5 FileList представляет собой массив объектов File, подобный массиву. Поля ввода файла возвращают FileList через свойство files (event.target.files). Удаленные файлы возвращают объект FileList через свойство dataTransfer.files события (event.dataTransfer.files).

Поэтому мы можем получить объект FileList, используя один обработчик событий: 

 
// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Важно отменить событие по умолчанию. Это предотвращает попытку браузера отобразить или обработать файл, когда он помещен в окно.

Анализ файловых объектов

Коллекции FileList содержат несколько объектов File. Предусмотрено три полезных свойства файла:

  1. .name : имя файла (оно не включает информацию о пути)
  2. .type : тип MIME, например, image / jpeg, text / plain и т. д.
  3. .size : размер файла в байтах.

Можно проверить тип и размер файла перед дальнейшей обработкой или загрузкой, например 

 
// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
	...
}

Для получения дополнительной информации обратитесь к разделу Как открыть удаленные файлы с использованием HTML5 и JavaScript .

Открытие файлов с помощью FileReader

Объект HTML5 FileReader позволяет открывать текстовые или двоичные файлы в JavaScript. Как и следовало ожидать, метод readAsText () используется для извлечения текстового содержимого, например 

 
if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

Аналогично, метод readAsDataURL () извлекает данные двоичного изображения в виде URL-адреса закодированных данных, который можно передать в атрибут src изображения или элемент canvas: 

 
if (file.type.indexOf("image") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		document.getElementById("myimage").src = e.target.result;
    }
    reader.readAsDataURL(file);
}

Для получения дополнительной информации обратитесь к разделу Как открыть удаленные файлы с использованием HTML5 и JavaScript .

Загрузка файлов с помощью Ajax

Соответствующие файлы могут быть загружены на ваш сервер, пока пользователь остается на странице. Это просто вопрос передачи объекта File в метод send () XMLHttpRequest2: 

 
var xhr = new XMLHttpRequest();
xhr.open("POST", "receivefile.php", true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);

Обратите внимание, что мы также отправили имя файла в виде заголовка HTTP. Это необязательно, но позволяет нам воссоздать файл, используя его оригинальное имя на сервере, используя такой язык, как PHP: 

 
file_put_contents(
	'uploads/' . $_SERVER['HTTP_X_FILENAME'],
	file_get_contents('php://input')
);

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

Создание индикаторов загрузки

Мы также можем прикрепить событие «progress» к объектам XMLHttpRequest2: 

 
xhr.upload.addEventListener("progress", ProgressHandler);

Обработчик получает объект события со свойствами .loaded (количество переданных байтов) и .total (размер файла). Следовательно, прогресс может быть рассчитан и передан в тег progress 

 
function ProgressHandler(e) {
	var complete = Math.round(e.loaded / e.total * 100);
	console.log(complete + "% complete");
}

Для получения дополнительной информации см. Как создать графические индикаторы загрузки файлов в HTML5 и JavaScript .

Надеюсь, вам понравился этот сериал. Перетаскивание файла является важной функцией, которая может изменить удобство использования веб-приложения. HTML5, наконец, облегчает.

37
Share: