HTML5 File API для взаимодействия с файлами в браузере

demo

Недавно я столкнулся с определённой задачей: необходимо, чтобы пользователь загрузил файл через браузер, сделал несколько преобразований и затем сохранил результат.

Данную задачу можно было бы реализовать старым способом:

  • Загрузить изображение через AJAX
  • Рендеринг загруженного изображения в браузере
  • Преобразуем изображение через JavaScript
  • Делаем дополнительный запрос для преобразования изображения и
  • Сохраняем преобразованное изображение на сервере

Слишком много серверных операций. Данный способ не очень эффективен, так что мы нашли другой способ - HTML5 File API.

Что такое HTML5 File API?

HTML5 File API позволяет локально преобразовывать файлы, без предварительной загрузки на сервер.

3 основных HTML5 File объекта

Для работы с данным API вам нужно ознакомиться с тремя объектами:

File – простой объект файла с некоторыми метаданными.

FileList – список из объектов типа файл.

FileReader – объект для считывания файла и некоторыми метода обработки.

Получение доступа к файлу через JavaScript

Список файлов можно получить после их выбора через HTML элемент input. Вот небольшой пример по взаимодействию с загружаемым файлом. Мы воспользуемся console.log() для вывода промежуточной информации.

Выбор одного файла

// отслеживаем использование элемента input с id = “the-file-input”
$("#the-file-input").change(function() {
   // выводим объект FileList
    console.log(this.files);
});

<!-- получаем доступ через input -->
<input id="the-file-input" type="file">

Выбор нескольких файлов

<!-- для выбора нескольких файлов, добавляем атрибут multiple -->
<input id="the-file-input" type="file" multiple>

Рендеринг файла в браузере

Теперь когда мы знаем как получить доступ к объекту FileList, осталось узнать как осуществить рендеринг изображения в браузере. Для этого нам нужно скормить объект File, объекту FileReader для генерации локального url, который будет доступен через атрибут src элемента image.

// рендеринг изображения
function renderImage(file) {

 // генерация нового объекта FileReader
  var reader = new FileReader();

 // подстановка изображения в атрибут src
  reader.onload = function(event) {
    the_url = event.target.result
    $('#some_container_div').html("")
  }

 // при считке файла, вызывается метод, описанный выше
  reader.readAsDataURL(file);
}

// обработка элемента input
$("#the-file-input").change(function() {
    console.log(this.files)

   // выбор первого изображения из FileList и передача в функцию
    renderImage(this.files[0])
});

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

Заключение

Метод, который мы показали может снизить нагрузку на сервер. Так же это новый полигон для создания приложений по обработке фото.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser
Перевел: Станислав Протасевич
Урок создан: 11 Ноября 2014
Просмотров: 22227
Правила перепечатки

5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

^ Наверх ^