Недавно я столкнулся с определённой задачей: необходимо, чтобы пользователь загрузил файл через браузер, сделал несколько преобразований и затем сохранил результат. Данную задачу можно было бы реализовать старым способом: Загрузить изображение через AJAX Рендеринг загруженного изображения в браузере Преобразуем изображение через JavaScript Делаем дополнительный запрос для преобразования изображения и Сохраняем преобразованное изображение на сервере Слишком много серверных операций. Данный способ не очень эффективен, так что мы нашли другой способ - HTML5 File API. Что такое HTML5 File API? HTML5 File API позволяет локально преобразовывать файлы, без предварительной загрузки на сервер. 3 основных HTML5 File объекта Для работы с данным API вам нужно ознакомиться с тремя объектами: File – простой объект файла с некоторыми метаданными. FileList – список из объектов типа файл. FileReader – объект для считывания файла и некоторыми метода обработки. Получение доступа к файлу через JavaScript Список файлов можно получить после их выбора через HTML элемент input. Вот небольшой пример по взаимодействию с загружаемым файлом. Мы воспользуемся console.log() для вывода промежуточной информации. Выбор одного файла 1 // отслеживаем использование элемента input с id = “the-file-input” 2 $("#the-file-input").change(function() { 3 // выводим объект FileList 4 console.log(this.files); 5 }); 1 <!-- получаем доступ через input --> 2 <input id="the-file-input" type="file"> Выбор нескольких файлов 1 <!-- для выбора нескольких файлов, добавляем атрибут multiple --> 2 <input id="the-file-input" type="file" multiple> Рендеринг файла в браузере Теперь когда мы знаем как получить доступ к объекту FileList, осталось узнать как осуществить рендеринг изображения в браузере. Для этого нам нужно скормить объект File, объекту FileReader для генерации локального url, который будет доступен через атрибут src элемента image. 01 // рендеринг изображения 02 function renderImage(file) { 03 04 // генерация нового объекта FileReader 05 var reader = new FileReader(); 06 07 // подстановка изображения в атрибут src 08 reader.onload = function(event) { 09 the_url = event.target.result 10 $('#some_container_div').html("<img src="" + the_url + "" alt="">") 11 } 12 13 // при считке файла, вызывается метод, описанный выше 14 reader.readAsDataURL(file); 15 } 16 17 // обработка элемента input 18 $("#the-file-input").change(function() { 19 console.log(this.files) 20 21 // выбор первого изображения из FileList и передача в функцию 22 renderImage(this.files[0]) 23 }); В данном примере мы продемонстрировали как можно отобразить изображение в браузере без загрузки на сервер! Это отличный вариант, особенно если на нашем сайте огромное количество пользователей, который совершают данную операцию. Заключение Метод, который мы показали может снизить нагрузку на сервер. Так же это новый полигон для создания приложений по обработке фото.