HTML5 File API

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

Більш старомодний спосіб зробити це:

1. Завантажити зображення  через AJAX;

2. Відобразити зображення в браузері;

3. Внести зміни за допомогою JavaScript;

4. Зробити ще один запит з даними про те, як обробити зображення;

5. Застосувати зміни на сервері.

Два запити на сервер? Це доволі неефективний спосіб, час знайомитись з HTML5 File API.
 

Що таке HTML5 File API?

HTML5 File API дозволяє створювати додатки, які надають користувачеві можливість взаємодіяти з файлами локально. Тепер ви можете завантажити файли і рендерити їх прямо в браузері.
Детальніше про браузерну підтримку.
 

3 Основних об’єкта HTML5 File API

Існує три основних об'єкта, про роботу яких ви повинні знати, щоб працювати з файлами локально:

1. File - файловий об'єкт з деякими метаданими;

2. FileList - список файлових об'єктів;

3. FileReader - об'єкт для читання файлів з рядом методів і обробників подій для взаємодії з ними.

Доступ до файлу з використанням JavaScript

Список файлів можна буде отримати при виборі файлу за допомогою HTML file input. Нижче наведено приклад коду для обробки файлу вхідних даних. Ми будемо використовувати console.log (), щоб бачити який input використовується.

Вибір одного файлу

// виявляти зміни у файлі з id “the-file-input”
$("#the-file-input").change(function() {
    // виконає log об'єкта FileList (дивитися GIF нижче)
    console.log(this.files);
});

<!-- input, який приймає один файл -->
<input id="the-file-input" type="file">

Вибір декількох файлів

<!-- зверніть увагу на атрибут multiple-->
<input id="the-file-input" type="file" multiple>

Рендеримо файл в браузері

Тепер, коли ми знаємо, як отримати доступ до об’єкта FileList, все, що нам залишилося зробити, це обробити файл у браузері. Ми робимо це шляхом подачі одного з файлових об'єктів в FileReader для генерації локального url, який може бути використаний в якості src для елемента image.

// рендеримо зображення
function renderImage(file) {
  // генеруємо новий об'єкт FileReader
  var reader = new FileReader();
  // додаємо до зображення src url
  reader.onload = function(event) {
    the_url = event.target.result
    $('#some_container_div').html("<img src='" + the_url + "' />")
  }
  //коли файл читається, вище спрацьовує подія onload.
  reader.readAsDataURL(file);
}
// фіксуємо зміни вводу
$("#the-file-input").change(function() {
    console.log(this.files)
    // отримуємо перше зображення об'єкта FileList та передаємо його у функцію
    renderImage(this.files[0])
});

За допомогою цього простого коду, ми можемо отримати і показати зображення без звертання до сервера! Це дуже круто, оскільки це зменшує навантаження на наш сервер, коли у нас є гігантська кількість користувачів, які завантажують наш неймовірно популярний додаток :)
 

Демо

See the Pen CLjqH by Codeguida (@codeguida) on CodePen.

CodePen демо також дозволяє вам ближче поглянути на деякі інші атрибути, які ви можете отримати з файлу об'єкта, такі як size і name.
 

З HTML5 File API ми можемо переглядати файли в браузері без їх завантаження на сервер. Це покращує продуктивность нашого додатка в цілому і відкриває безліч корисних можливостей.

Джерело