Статьи

Как открыть удаленные файлы с помощью HTML5

Февраль 4, 2019

В моем последнем посте « Как использовать перетаскивание файлов HTML5» мы узнали, как использовать API-интерфейс файлов HTML5, реализовывать события перетаскивания и получать информацию о файлах. Сегодня мы попытаемся загрузить файлы на клиент с помощью JavaScript.

Зачем открывать локальные файлы в JavaScript?

Загрузка файлов из HTML-формы неуклюжа. Люди часто используют его при передаче фотографий размером в несколько мегабайт со своей камеры на веб-сервер. Предполагая, что они находят файл, загрузка может занять несколько минут, только чтобы обнаружить, что это была неправильная фотография, неподдерживаемый формат или размер файла больше, чем разрешено. До сих пор разработчикам приходилось полагаться на Flash или другие плагины, чтобы обеспечить лучший пользовательский опыт.

Предварительная обработка в JavaScript предлагает ряд преимуществ:

  • Локальная обработка файлов выполняется быстро.
  • Файлы можно анализировать, чтобы убедиться, что они имеют правильный формат и размер меньше определенного размера.
  • Файлы, такие как изображения, можно предварительно просмотреть перед загрузкой.
  • Можно обрезать или изменить размер изображения на элементе canvas затем загрузить полученный файл.

Объект FileReader

FileReader является частью W3C File API и предлагает четыре метода асинхронной загрузки данных из файла, на который есть ссылка в объекте File:

  • .readAsText (файл f, [кодировка]) : читает файл f в строку. Предполагается кодирование UTF-8, но необязательный параметр кодирования может указывать другой формат.
  • .readAsDataURL (Файл f) : считывает Файл f в URL закодированных данных
  • .readAsBinaryString (файл f) : читает файл f как двоичную строку
  • .readAsArrayBuffer (Файл f) : считывает Файл f как объект ArrayBuffer .

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

Асинхронное открытие файлов в JavaScript

Вот наша оригинальная функция ParseFile (), которой передается объект File, когда он выбирается или помещается в элемент #filedrag: 

 // output file information function ParseFile(file) { Output( "<p>File information: <strong>" + file.name + "</strong> type: <strong>" + file.type + "</strong> size: <strong>" + file.size + "</strong> bytes</p>" ); }

После обновления статуса мы проверим, есть ли у нас текстовый файл (text / plain, text / html, text / css и т. Д.), Загрузим его с помощью метода FileReader.readAsText () и отобразим результат (после экранирования < и> персонажи): 

 // display text if (file.type.indexOf("text") == 0) { var reader = new FileReader(); reader.onload = function(e) { Output( "<p><strong>" + file.name + ":</strong></p><pre>" + e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</pre>" ); } reader.readAsText(file); }

Аналогично, мы можем проверить, есть ли у нас файл изображения (image / jpeg, image / gif, image / png и т. Д.), Загрузить его в URL-адрес данных с помощью метода FileReader.readAsDataURL () и передать результат в атрибут src тега img : 

 // display an image if (file.type.indexOf("image") == 0) { var reader = new FileReader(); reader.onload = function(e) { Output( "<p><strong>" + file.name + ":</strong><br />" + '<img src="' + e.target.result + '" /></p>' ); } reader.readAsDataURL(file); }

Пожалуйста, просмотрите демонстрационную страницу в Firefox, Chrome или Opera (без поддержки перетаскивания). Вы также можете скачать файлы, чтобы изучить код.

Хотя это полезно, в конечном итоге нам нужно загрузить наши файлы на веб-сервер. Следите за тем, как асинхронно загружать файлы с использованием HTML5 и Ajax …

38
Share: