Чтение локальных файлов с помощью File API

  1. Получение данных
  2. Чтение файлов
  3. Положить его вместе
  4. URL для файлов
  5. Завершение

Узнайте, как использовать локальную файловую систему для создания приложений, которые лучше работают в автономном режиме   Джон Аллсоп будет обсуждать будущее Интернета и как вы можете подготовиться к нему в своем выступлении,   Предскажи будущее этим странным старым трюком   , в   Генерировать Сидней   5 сентября

Узнайте, как использовать локальную файловую систему для создания приложений, которые лучше работают в автономном режиме

Джон Аллсоп будет обсуждать будущее Интернета и как вы можете подготовиться к нему в своем выступлении, Предскажи будущее этим странным старым трюком , в Генерировать Сидней 5 сентября. Забронируйте сейчас !

Поскольку приложения, которые мы создаем с помощью веб-технологий, стремятся соответствовать собственным приложениям, одной из областей, где браузер остается проблематичным, является его доступ к файлам в системе пользователя. В течение многих лет браузеры позволяли пользователям выбирать файлы для загрузки на сервер в виде HTML с помощью <input type = "file">.

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

Если бы мы могли прочитать содержимое этих файлов, мы бы меньше полагались на функциональность на стороне сервера. К счастью, с HTML5 теперь мы можем читать файлы из локальной файловой системы. Это означает, что мы можем создавать приложения, которые лучше работают в автономном режиме.

Джон Аллсопп представил «Будущее сети в автономном режиме» на выставке Teller и Berlin 2014. Пролистайте, чтобы посмотреть видео

HTML-элемент ввода type = "file" позволяет пользователям выбирать один или несколько файлов из локальной файловой системы. До HTML5 целью ввода файлов было исключительно предоставление пользователям возможности выбирать файлы для загрузки через форму. В HTML5 элементы ввода type = "file" теперь предоставляют разработчикам доступ к метаданным о выбранных файлах: имени файла, дате последнего изменения и размере файла в байтах.

Если мы хотим, чтобы пользователь мог выбирать несколько файлов одновременно, нам нужно дать входному атрибуту несколько атрибутов. Затем мы создадим обработчик события изменения для нашего ввода файла (мы дадим ему идентификатор fileChooser), вызываемый при изменении значения ввода файла.

document.querySelector ("# fileChooser"). addEventListener ('change', filesChosen, false)

Когда пользователь выбирает файл с вводом файла, вызывается наш обработчик событий и получает событие в качестве аргумента. Целевым атрибутом события является файл ввода. У него есть файл атрибутов, который представляет собой массив, подобный объекту FileList, содержащий объекты файлов, выбранные пользователем. Даже если мы не установили множественный атрибут на нашем входе, атрибут files остается FileList, просто содержащим один элемент.

Получение данных

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

function filesChosen (evt) {var selectedFile = evt.target.files [0]; // получить первый файл в FileList var fileName = selectedFile.name; // имя файла в виде строки var fileSize = selectedFile.size; // размер файла в байтах в виде целого числа var fileModifiedDate = selectedFile.lastModifiedDate; // объект Date}

Как мы можем использовать их? Ну, мы могли бы использовать localStorage для запоминания деталей о файлах, которые были загружены на сервер, и оповещать пользователей, когда мы уже загрузили файл с тем же именем, размером и датой изменения, сохраняя их для загрузки. Или перед загрузкой мы можем определить те файлы, для загрузки которых может потребоваться много времени из-за их размера, и предупредить пользователя.

Однако эта информация все еще довольно ограничена. К счастью, HTML5 также предоставляет способ чтения содержимого файла.

Джон Аллсоп будет обсуждать будущее сети в Generate Sydney; не пропустите это!

Чтение файлов

Объект FileReader позволяет нам читать содержимое файла, как только мы получили файл от пользователя. В целях безопасности пользователь должен активно дать нам ссылку на файл, чтобы он был читаемым. Существует несколько методов FileReader для получения содержимого файла:

  • readAsDataURL (file): возвращает содержимое файла в виде dataURL, который может использоваться в качестве src элемента img или изображения в таблице стилей
  • readAsText (file [, encoding]): читает файл как строку с заданной необязательной кодировкой (по умолчанию UTF-8)
  • readAsArrayBuffer (file): читает содержимое файла как ArrayBuffer

Поскольку JavaScript является однопоточным, а файлы потенциально могут быть большими, методы чтения FileReader являются асинхронными. Это также означает, что несколько файлов могут быть прочитаны одновременно. Мы можем остановить чтение файла во время его выполнения, используя FileReader.abort (). Поскольку эти методы являются асинхронными, а не устанавливают значение переменной для результата метода, нам необходимо прослушивать события, которые отправляются объекту FileReader.

Эта статья Алексея Фейерке была одной из первых, в которой исследовалась тенденция к созданию офлайн-первых веб-приложений. Прочитайте, чтобы прочитать

Одно из событий, которое получает FileReader, загружается, когда файл, который мы хотим, был прочитан. Свойство target этого события - это сам FileReader - у него есть свойство с именем result, в котором содержится содержимое прочитанного файла. Вот как мы можем получить dataURL для содержимого файла:

var reader = new FileReader (); // создаем наш объект FileReader для чтения файла reader.addEventListener ("load", fileRead, false); // добавляем прослушиватель событий для загруженной функции события fileRead (event) {//, вызываемой при возникновении события загрузки в FileReader var pictureURL = event.target.result; // целью события является экземпляр объекта FileReader // свойство результата FileReader содержит содержимое файла} reader.readAsDataURL (file); // когда файл загружен, вызывается fileRead

Мы добавляем прослушиватель события для события загрузки, и в обработчике этого события получаем target.result, который является значением операции FileReader (например, DataURL, string или arrayBuffer, в зависимости от того, какую операцию мы задали FileReader выполнять).

Мы можем прослушивать любое из следующих событий в объекте FileReader:

  • loadstart: когда FileReader начинает читать файл
  • Ход выполнения: периодически во время загрузки файла
  • прервать: когда чтение файла прервано
  • загрузка: при чтении завершается успешно
  • loadend: когда файл был загружен или чтение не удалось

Если чтение завершается успешно, запускаются события загрузки и загрузки. Если происходит сбой, генерируются события ошибки и загрузки.

Положить его вместе

Мы позволим пользователю выбрать файл изображения, а затем показать его в виде эскиза. Во-первых, наш элемент ввода:

<input type = "file" id = "chooseThumbnail" accept = "image / *"> и мы добавляем прослушиватель событий для случая, когда ввод изменится document.querySelector ("# chooseThumbnail"). addEvent Listener ('change', showThumbNail, ложный)

Когда пользователь делает выбор, мы вызываем функцию showThumbNail (). В HTML5 мы можем использовать accept = 'image / *', чтобы принять любой тип изображения. Целью события является входной элемент, который имеет файл свойств (массивоподобный объект, называемый FileList). Мы получаем первый элемент в FileList и читаем его.

function showThumbNail (evt) {var url; файл var; file = evt.target.files [0]; читатель = новый FileReader (); // нам нужно создать экземпляр нового объекта FileReader reader.addEventListener ("load", readThumbNail, false); // мы добавляем прослушиватель событий, когда файл загружается FileReader // это вызовет нашу функцию 'readThumbNail ()' reader.readAsDataURL (file); // теперь мы читаем данные} function readThumbNail (event) {// это наш обратный вызов, когда событие загрузки отправляется в FileReader var thumbnail = document.querySelector ("# thumbnail"); thumbnail.src = event.target.result; // у события есть свойство target, FileReader со свойством 'result', // где находится читаемое нами значение}

URL для файлов

Часто, когда мы обращаемся к локальному файлу, мы фактически не хотим использовать его содержимое напрямую, а используем этот файл для каких-то других целей. Например, если это файл изображения, мы можем захотеть отобразить изображение; если это файл CSS, используйте его как таблицу стилей.

Одним из конкретных случаев является отображение видеопотока в элементе видео при работе с getUserMedia. Самый простой способ сделать это - получить временный анонимный URL-адрес из браузера, чтобы использовать его так же, как любой другой URL-адрес - например, в качестве значения атрибута src для изображения. В файловом API HTML5 объект окна имеет свойство URL. Это имеет два метода:

  • createObjectURL: создает URL для данного файла
  • revokeObjectURL: уничтожает ссылку между URL и файлом

Мы не можем сохранить созданный таким образом URL-адрес, скажем, в localStorage, а затем повторно использовать его в другом окне, поскольку он сохраняется только в течение всего срока действия документа, пока окно, в котором он был создан, открыто.

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

<input type = "file" id = "chooseThumbnail" accept = "image / *"> и вот функция JavaScript showThumbNail (evt) {var url; файл var; var thumbnail = document.querySelector ("# thumbnail"); // это элемент изображения, где мы будем отображать миниатюру file = evt.target.files [0]; // потому что на входе нет атрибута «множественный» // пользователи могут выбрать только один // мы хотим проверить, что это правильный тип файла url = window.URL.createObjectURL (file); // мы создаем наш URL (для браузеров WebKit нам нужен webkitURL.createObjectURL) thumbnail.src = url; // мы даем нашему элементу миниатюрного изображения этот URL в качестве его источника}

Были сделаны! Не нужно беспокоиться об асинхронном чтении файлов или функциях обратного вызова. Когда мы хотим использовать только файл, а не читать его содержимое, это наиболее предпочтительное решение.

Завершение

Файловый API приближает браузер к собственной файловой системе, позволяя пользователям воспроизводить, просматривать и редактировать контент из своей локальной системы непосредственно в браузере без необходимости их отправки на сервер.

Это даже позволяет нам получить доступ к камере и делать фотографии, используя capture = camera как часть значения атрибута type. Однако мы все еще будем ждать некоторое время (вполне вероятно, навсегда), чтобы получить полный доступ к собственной файловой системе.

Не пропустите открытие сессии Джона Аллсоппа - Предскажи будущее этим странным старым трюком - в Генерировать Сидней 5 сентября.

Похожие

Онлайн банкинг
... файлов cookie». Выберите ПРИНЯТЬ для «Сторонних файлов cookie» и «Сторонних файлов cookie». Поставьте галочку рядом с «Всегда разрешать сессионные куки». Нажмите OKAY. Безопасность Нажмите ИНСТРУМЕНТЫ (значок шестеренки в верхнем левом углу). Выберите ИНТЕРНЕТ ОПЦИИ. Нажмите вкладку БЕЗОПАСНОСТЬ. Установите уровень безопасности для интернет-зоны на MEDIUM. (если ползунок недоступен, нажмите кнопку «Уровень
Веб-приложения: привнесение преимуществ нативных приложений в веб-браузер
... для различных типов устройств и преимуществ от поиска по ссылкам из социальных сетей, электронной почты, партнеров и т. д. - как объяснено в предыдущем столбце - всегда был сдержан нативными (загружаемыми) приложениями, обеспечивающими лучшее Пользовательский опыт (UX) и функциональность.
Руководство по настройке виртуального коммутатора Hyper-V
Физический (и умственный!) Процесс перехода от унаследованного к виртуальному иногда может быть трудной работой для администратора, поскольку термины и функции виртуальной сферы иногда отличаются от того, что было изучено ранее. Для тех из вас, кто узнает о многих аспектах виртуализации и Hyper-V, , мы продолжим публиковать полезные посты, в которых объясняются различные функции Hyper-V. Сегодня я хочу рассказать
итерация
... его оператора. Если условие истинно, выполнить тело и затем вернуться к шагу 1. Этот тип потока называется циклом, потому что третий шаг возвращается к вершине. Каждый раз, когда мы выполняем тело цикла, мы называем это итерацией . Для вышеприведенного цикла мы бы сказали: «У него было пять итераций», что означает, что тело цикла было выполнено пять раз. Тело цикла должно изменить значение одной или нескольких переменных, чтобы в конечном
Советы по сохранению на Пасху: DIY пасхальные подарки
Пасха не за горами, и вы, наверное, уже подумали о многих вещах, которые хотите подарить на Пасху. Для небольших бюджетов не так просто получить пасхальные подарки дешево. Тем не менее, есть много отличных способов раздать домашние пасхальные подарки. Поэтому наш совет: пасхальные подарки сделаны с любовью!
Получите бесплатный лицензионный ключ для Windows 7 (32 и 64 бит) 2018
Как получить лицензионный ключ Windows 7 для 32/64 бит в 2019 году До сих пор существует большое количество компьютеров, работающих под управлением Microsoft Windows 7. Группа пользователей стремится сохранить систему Windows 7 на ПК и не будет обновляться до Windows 10 только из-за ее стабильности и совместимости. Чтобы использовать Windows 7 для улучшения функций, вы должны активировать его с помощью лицензионного ключа. Здесь я собираюсь показать вам, как получить ключ продукта
Google PageSpeed ​​Insights - 100/100 с помощью WordPress
... для скорости веб-сайта - удерживать ее менее 3 секунд. время загрузки. Как видно из приведенного ниже графика, эта лучшая практика далеко не соблюдается для сайтов, базирующихся в Соединенных Штатах. Кроме того, как рост размера веб-страницы Продолжается, рекомендуемая Google лучшая практика по поддержанию размера веб-сайта размером менее 500 КБ также в среднем не соблюдается. Постоянный рост
Как начать спортивный блог
Как начать спортивный блог - Вы когда-нибудь надеялись начать спортивный блог? Спорт - великое американское прошлое. Мы занимаемся спортом, мы смотрим спорт, и мы говорим об этом - много. У некоторых людей даже есть желание писать о спорте. Можно хотеть охватить большую аудиторию, чем просто семья и друзья, с их взглядами на спорт, команды и игроков. Интернет и блогосфера предоставляют такую ​​возможность. Даже если вы не являетесь профессионально подготовленным спортивным писателем, вы

Комментарии

А что, если мы случайно попадем в вонючее такси, потому что кто-то порекомендовал его нам?
А что, если мы случайно попадем в вонючее такси, потому что кто-то порекомендовал его нам? Сойти! Слезай быстрее и лучше захлопнуть дверь. Потому что клип или AdBlock не является решением здесь. * Фотографии приходят Shutterstock ,
Вы хотите управлять Android с помощью мыши, но у вас нет специального кабеля для подключения к телефону?
Вы хотите управлять Android с помощью мыши, но у вас нет специального кабеля для подключения к телефону? Это не имеет значения - вы можете поделиться мышью, подключенной к компьютеру, и использовать ее для управления как Android, так и компьютером. Как это сделать? Мы привыкли показывать вам
Но что делает его таким замечательным?
Но что делает его таким замечательным? Мы решили взглянуть на теорию музыки, стоящую за балладой силы Frozen. Настройка сцены для вас Для тех немногих людей, которые не видели Фростен несколько раз и знают сюжет наизусть, песня появляется в конце первого акта фильма, когда Эльза только что сбежала из своей собственной коронации и начала вечную зиму в ее город, Аренделле. Она чувствует себя изолированной, но разочарована внешним миром, который, кажется, боится ее ледяной силы.
Итак, через год после его появления планшет выдержал?
Итак, через год после его появления планшет выдержал? Некоторые рассеянные мысли: • Нет двух способов: Nexus 7 по-прежнему остается моим любимым планшетом на рынке. подобно Motorola's Moto X У него не самый привлекательный дизайн, но он имеет теплую и удобную форму, которую приятно использовать. Мягкая на ощупь пластиковая подложка планшета отлично на ощупь. Он также доказал
Они оба имеют одинаковую емкость, но пока неизвестно, как долго продлится Pixi - будут ли его новые чипы потреблять меньше энергии, чем Apple?
Они оба имеют одинаковую емкость, но пока неизвестно, как долго продлится Pixi - будут ли его новые чипы потреблять меньше энергии, чем Apple? Или его светодиодная вспышка будет потреблять гораздо больше энергии? Связь является самой большой особенностью, которая выделяется. В Pixi нет Wi-Fi (по-видимому, чтобы сэкономить деньги), и это серьезно повлияет на взаимодействие пользователей с устройством, поскольку единственный вариант для беспроводной загрузки - это EVDO, который имеет
В этот момент вам может быть интересно, почему бы просто не заполнить polyfill (то есть создать shim для JavaScript) image-set () и назвать его днем?
В этот момент вам может быть интересно, почему бы просто не заполнить polyfill (то есть создать shim для JavaScript) image-set () и назвать его днем? Оказывается, реализовать CSS-функции довольно сложно. (Для подробного объяснения почему, см. Это обсуждение в стиле www ). Изображение Srcset Вот пример srcset: <img alt = "my awesome image" src = "banner.jpeg" srcset = "banner-HD.jpeg

А что, если мы случайно попадем в вонючее такси, потому что кто-то порекомендовал его нам?
Вы хотите управлять Android с помощью мыши, но у вас нет специального кабеля для подключения к телефону?
Как это сделать?
Но что делает его таким замечательным?
Итак, через год после его появления планшет выдержал?
Итак, через год после его появления планшет выдержал?
Они оба имеют одинаковую емкость, но пока неизвестно, как долго продлится Pixi - будут ли его новые чипы потреблять меньше энергии, чем Apple?
Или его светодиодная вспышка будет потреблять гораздо больше энергии?
В этот момент вам может быть интересно, почему бы просто не заполнить polyfill (то есть создать shim для JavaScript) image-set () и назвать его днем?