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


Содержание

Особенности загрузки файлов на HTML5

1. Поддержка браузерами

Конечно же не все браузеры на данный момент поддерживают в полной мере эту возможность. Про IE благополучно забываем, так как он будет поддерживать File API только в 10 версии. С остальными, более прогрессивными браузерами, а это всего лишь Chrome, Firefox, Opera и Safari, тоже не все так гладко. Они конечно стараются быть «вперде», но пока не у всех получается.

В HTML 5 существует 2 способа считать и асинхронно отправить файл на сервер: через объекты File Reader и Form Data. В принципе, именно для загрузки файлов разницы нет, каким способом отправлять файлы на сервер. Если говорить совсем точно, то за отправку файлов несет ответственность объект XMLHttpRequest, а File Reader и Form Data всего лишь позволяют считать файл и «скормить» его XHR. Эти объекты предназначены для разных задач. File Reader предназначен для работы с файлами на стороне браузера. То есть еще до загрузки файла на сервер можно узнать его параметры, такие как вес, тип, дата создания и т. п. Картинки, например, можно сразу показывать пользователю, не загружая их на сервер. Form Data предназначен для создания форм и управления данными форм до загрузки на сервер. А как мы знаем, в формах и присутствует input type=»file», через который до этого момента мы и отправляли файлы. Таким образом можно создать форму, прикрепить к ней файл и через XHR отправить ее на сервер.

От лирики к делу. Рассмотрим оба примера загрузки. Но прежде небольшая заметка о том, что неплохо было бы определять возможности браузера по загрузке через File API. Для этого достаточно проверить наличие объектов File Reader или Form Data. Но! Safari до сих пор не сделал поддержку File Reader и работать с этим объектом у вас не получится. Яблофаги негодуют, а мы любим всех пользователей одинаково. Поэтому на данный момент самой правильной проверкой будет считаться наличие Form Data:

2. Загрузка через Form Data

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

Ну и закодим непосредственно чтение и загрузку файлов:

3. Загрузка через File Reader

File Reader собственно и предназначен для работы с файлами на стороне браузера. Попробуем загрузить файлы при помощи этого объекта. Напоминаем, что в Safari нет объекта File Reader!

Данная статья является не инструкцией к применению, а всего лишь пособием для изучения возможностей HTML 5. Код не претендует на идеальность.

HTML5 File API downloading file from server and saving it in sandbox

I’m trying to understand HTML5 API. I’m designing the web application where the browser client need to download multiple files from server; user will perform something with the downloaded files and the application than need to save the state on user hard-rive. I understand that the browser can save these files only to its sandbox which is fine as long as the user can retrieve those files on the second time he starts the application. Should I use BlobBuilder or FileSaver? I’m a bit lost here.

3 Answers 3

I’m going to show you how to download files with the XMLHttpRequest Level 2 and save them with the FileSystem API or with the FileSaver interface.

Downloading Files

To download a file you will use the XMLHttpRequest Level 2 (aka XHR2), which supports cross-origin requests, uploading progress events, and uploading/downloading of binary data. In the post «New Tricks in XMLHttpRequest2» there’s plenty of examples of use of XHR2.

To download a file as a blob all you have do to is specify the responseType to «blob». You can also use the types «text», «arraybuffer» or «document». The function below downloads the file in the url and sends it to the success callback:

The success callback will receive as argument an instance of Blob that can be later modified and saved and/or uploaded to a server.

Saving Files with the FileSystem API

As the Can i use. site points out there aren’t many browsers with support to the FileSystem API. For Firefox there’s an explanation for the lack of support. So, you will have to use Chrome to do this.

First you will have to request a storage space, it can be either temporary or persistent. You will probably want to have a persistent storage, in this case you will have request a quota of storage space upfront (some facts):

Now that you have access to the file system you can save and read files from it. The function below can save a blob in the specified path into the file system:

And to read a file by its path:

In addition to the readAsText method, according to the FileReader API you can call readAsArrayBuffer and readAsDataURL .

Using the FileSaver

The post «Saving Generated Files on Client-Side» explains very well the use of this API. Some browsers may need the FileSaver.js in order to have the saveAs interface.

If you use it together with the downloadFile function, you could have something like this:

Of course it would make more sense if the user could visualize the image, manipulate it and then save it in his drive.

Use the HTML5 File API to Work with Files Locally in the Browser

I recently came across a problem in a project that I was working on. I needed the user to be able to load an image into the browser, make a few edits to it, and then upload after they were pleased with the edits.

A more old fashioned way of doing this would be to:

  • Upload your image via AJAX
  • Render the uploaded image in the browser
  • Make edits using JavaScript
  • Make another request with data on how to process the image and
  • Apply the changes on the server

Two trips to the server? That seemed inefficient to me so I researched a little bit more and discovered the HTML5 File API.

What is the HTML5 File API?

The HTML5 File API allows you to create applications that let the user interact with files locally. Basically, you can load files and render them in the browser without actually having to upload the files.

3 Main HTML5 File Objects

There are three main objects that you need to know about to work with files locally:

File — A single file object with some metadata

FileList — Simply a list of file objects.

FileReader — An object to read files with a number of methods and event handlers to interact with them.

Accessing A File Using JavaScript

A file list can be accessed when you select a file using an HTML file input. Here is some sample code to handle file inputs. We will console.log() so that we can see what the input is providing us.

Select a Single File

Selecting Multiple Files

Rendering the File in Browser


Now that we know how to access the FileList object, all that is left to do is to render the file in the browser. We do this by feeding one of the File objects into a FileReader to generate a local url that can be used as the src in an image element.

With this simple code, we are able to grab and display an image without a trip to the server! This is great since it lessens the load on our server when we have a giant amount of users uploading to our incredibly popular application.

A Cooler Demo

There is a much cooler demo, that I made on CodePen, that actually shows an example video. Make sure you check it out here.

The CodePen demo will also give you a closer look at some other attributes that you can grab from the file object such as the file size and name .

Conclusion

Just like that, we are able to view files in browser without the server having to do any work. This helps our application performance overall and opens up lots of different things we can build like image editors.

File и FileReader

Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.

Есть два способа его получить.

Во-первых, есть конструктор, похожий на Blob :

  • fileParts – массив значений Blob / BufferSource /строки.
  • fileName – имя файла, строка.
  • options – необязательный объект со свойством:
    • lastModified – дата последнего изменения в формате таймстамп (целое число).

Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.

Так как File наследует от Blob , у объектов File есть те же свойства плюс:

  • name – имя файла,
  • lastModified – таймстамп для даты последнего изменения.

В этом примере мы получаем объект File из :

Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .

FileReader

FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).

Данные передаются при помощи событий, так как чтение с диска может занять время.

  • readAsArrayBuffer(blob) – считать данные как ArrayBuffer
  • readAsText(blob, [encoding]) – считать данные как строку (кодировка по умолчанию: utf-8 )
  • readAsDataURL(blob) – считать данные как base64-кодированный URL.
  • abort() – отменить операцию.

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

  • readAsArrayBuffer – для бинарных файлов, для низкоуровневой побайтовой работы с бинарными данными. Для высокоуровневых операций у File есть свои методы, унаследованные от Blob , например, slice , мы можем вызвать их напрямую.
  • readAsText – для текстовых файлов, когда мы хотим получить строку.
  • readAsDataURL – когда мы хотим использовать данные в src для img или другого тега. Есть альтернатива – можно не читать файл, а вызвать URL.createObjectURL(file) , детали в главе Blob.
Цукерберг рекомендует:  Контекстные выезжающие подсказки с помощью jQuery и CSS3

В процессе чтения происходят следующие события:

  • loadstart – чтение начато.
  • progress – срабатывает во время чтения данных.
  • load – нет ошибок, чтение окончено.
  • abort – вызван abort() .
  • error – произошла ошибка.
  • loadend – чтение завершено (успешно или нет).

Когда чтение закончено, мы сможем получить доступ к его результату следующим образом:

  • reader.result результат чтения (если оно успешно)
  • reader.error объект ошибки (при неудаче).

Наиболее часто используемые события – это, конечно же, load и error .

HTML 5 File API загрузки файла в браузере и сохранения содержимого в виде строки

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

Но консоль всегда регистрирует неопределенной, даже после того, как я выбрал файл. Функция OnClick, кажется, не работает, либо (возможно, потому что содержание не определены?)

Как загрузить файл с текстом и сохранить его содержимое в виде строки в качестве переменной?

Edit 1: Кто — то оставил полезный ответ , но я думаю , удалил. Я был в состоянии лучше следовать некоторым из информации , размещенной здесь , что объясняет , как получить содержимое файла, но я все еще возникают некоторые трудности. Эта связь объясняет , как загрузить файл , а затем выводит предупреждение , содержащее информацию файла, а также подстроку содержимого файла. Тем не менее, я хотел бы быть в состоянии видеть содержимое всей файловой когда они сохраняются в переменной. Я изменил часть своего кода , чтобы создать глобальную переменную , которая содержала то , что я думал , что содержимое файла, но всякий раз , когда я вхожу на консоль, даже после загрузки файла, он по- прежнему входит undefined . OnClick функция предупреждения продолжает не отображать.

Как я могу напечатать / журнал / предупреждения / и т.д. переменная , которая содержит текст, так что я могу видеть , как получить к нему доступ позже? Несмотря на использование глобальной переменной, когда я пытаюсь запустить другие функции на строке, он говорит , что не может этого сделать, потому что это undefined .

Изменить 2: С комментариями Ray Nicholus, я решил создать функцию , которая скопировали содержимое файла из функции OnLoad в глобальной переменной , она может быть использована вне функции. Добавление остальной части моего программного кода в функцию OnLoad будет практически невозможно , и требуют некоторого крупного переформатирования.

Но опять же , при попытке войти в консоль, печатать на экране или предупреждение window.text после вызова makeGlobalText(contents) внутри функции OnLoad, все остается неопределенным или нечувствительность. На этот раз, скорее всего , некоторая тривиальная проблемой я не вижу.


Если я функцию , которая принимает в строке внутри onload и копирует его в глобальную переменную, почему я не могу получить доступ к этой переменной за пределами?

Часть 3. Мощные возможности API-интерфейсов HTML5

Серия контента:

Этот контент является частью # из серии # статей: Основы HTML5

Этот контент является частью серии: Основы HTML5

Следите за выходом новых статей этой серии.

Итак, что такое API?

API (application programming interface— интерфейс прикладного программирования) — это совокупность инструкций по программированию и стандартов, определяющих доступ к программному приложению. Это позволяет разработчику при проектировании своей продукции пользоваться мощными возможностями, предоставляемыми соответствующим API-интерфейсом.

Спецификация HTML5 предлагает несколько новых API-интерфейсов. Примеры:

  • API-интерфейс двухмерного рисования, применяющийся вместе с новым тегом Canvas для отображения графиков и других визуальных материалов.
  • API-интерфейс механизма кэширования для поддержки офлайновых Web-приложений
  • API-интерфейс для воспроизведения видео и аудио, применяющийся вместе с новыми тегами video и audio.
  • API-интерфейс для доступа к истории просмотров и для добавления страниц к этой истории.
  • API-интерфейс типа drag-and-drop для использования с атрибутом draggable .
  • API-интерфейс редактирования для использования с атрибутом contenteditable .
  • Хранилище на клиентской стороне с API-интерфейсами JavaScript для пар типа «ключ/значение», а также встроенные базы данных на основе SQL.

Данная статья посвящена двум API-интерфейсам: Geolocation и Web Worker. Сначала в статье рассматриваются сами API-интерфейсы, а затем создается страница, содержащая оба этих интерфейса.

Ведение бизнеса в соответствии с местоположением: Geolocation

API-интерфейс Geolocation используется для определения географического положения и для обмена этой информацией. Этот API-интерфейс возвращает такие координаты, как долгота и широта. Компания может использовать эту информацию для предложения клиентам соответствующих услуг в зоне с указанными координатами. В общем случае такие услуги носят название LBS (Location-Based Services— услуги на базе информации о местоположении).

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

С одной стороны, такой бизнес действительно обеспечивает клиентам качество, удобство и пользу, а с другой стороны, он порождает экономические и финансовые преимущества для акционеров, кредиторов, пайщиков, сотрудников и поставщиков. LBS-услуги на основе так называемой «геолокации» (Geolocation — определение географического местоположения пользователя сети) весьма упрощают отслеживание и мониторинг устройства или индивидуума с помощью браузера или устройства небраузерного типа. С коммерческой точки зрения, геолокация представляет собой использование географических активов для определения местоположения индивидуума и последующей продажи этой специфической информации любому желающему использовать ее в социальных, коммерческих или иных целях (при наличии законного разрешения от владельца этой информации на такие действия).

Как работает геолокация

API-интерфейс Geolocation базируется на новом свойстве глобального объекта navigator под названием navigator.geolocation . JavaScript-объект navigator предоставляет полезную информацию о браузере посетителя и о его системе. Геолокация способна определять широту и долготу с помощью IP-адресов, баз данных в Интернете, беспроводных сетевых соединений, триангуляционных методов, GPS-технологий и т.д. Следует отметить, что точность геолокационной информации меняется в зависимости от средств получения этой информации. В некоторых обстоятельствах и в некоторых местоположениях невозможно получение точной или вообще какой-либо геолокационной информации.

Скрипты способны задействовать объект navigator.geolocation для установления информации о местоположении пользовательского устройства. После извлечения этой информации о местоположении создается объект Position, который затем наполняется соответствующими данными.

Объект navigator.geolocation имеет три метода:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

Метод getCurrentPosition()

Метод getCurrentPosition() извлекает текущее местоположение пользователя, однако делает это лишь один раз. Когда скрипт осуществляет вызов вышеуказанного метода, этот метод в асинхронном режиме пытается получить информацию о текущем местоположении пользовательского устройства. Термин асинхронное взаимодействие означает, что отправитель и получатель не участвуют в коммуникационном процессе одновременно. Использование асинхронного взаимодействия позволяет браузеру продолжить выполнение другой деятельности, поскольку он не обязан ждать ответа от принимающего объекта.

Метод getCurrentPosition() способен иметь до трех аргументов:

  • geolocationSuccess . Обратный вызов (callback) с текущим местоположением (обязательный аргумент).
  • geolocationError . Обратный вызов в случае ошибки (опциональный аргумент).
  • geolocationOptions . Геолокационные опции (опциональный аргумент).

Метод navigator.geolocation.getCurrentPositon() возвращает текущее местоположение пользовательского устройства посредством обратного вызова geolocationSuccess с объектом Position в качестве параметра. В случае ошибки осуществляется обратный вызов geolocationError с объектом PositionError в качестве параметра. Для аргумента geolocationOptions можно настроить следующие три свойства: enableHighAccuracy, timeout и maximumAge . Эти опциональные свойства обеспечивают, соответственно, высокую точность (если устройство поддерживает ее); период тайм-аута, до истечения которого сведения о местоположении должны быть возвращены; и максимальную продолжительность времени, на протяжении которого допускается использовать кэшированные данные о местоположении.

Вызов метода getCurrentPosition() осуществляется следующим образом.

Метод watchPosition()

Метод watchPosition() регулярно опрашивает местоположение пользователя с целью наблюдения за возможным изменением его местоположения. Этот метод способен иметь до трех аргументов.

После вызова метода watchPosition он в асинхронном режиме запускает процесс наблюдения, в ходе которого осуществляется извлечение нового объекта Position и создание аргумента watchID . В случае успешного извлечения осуществляется соответствующий обратный вызов geolocationSuccess с объектом Position в качестве аргумента. В случае ошибки извлечения (когда вызванный метод имеет ненулевой аргумент geolocationError ) метод генерирует обратный вызов geolocationError с объектом PositionError в качестве аргумента. В случае изменения местоположения устройства осуществляется соответствующий обратный вызов с новым объектом Position .

Вызов метода watchPosition() осуществляется следующим образом.

Метод clearWatch()

Метод clearWatch() терминирует исполняющийся метод watchPosition() . Этот метод способен иметь лишь один аргумент. После вызова этого метода он находит ранее запущенный аргумент watchID и немедленно останавливает его.

Вызов метода clearWatch() осуществляется следующим образом.

Геолокационные данные: объект Position

API-интерфейс Geolocation возвращает географический объект Position . Этот объект имеет два свойства: timestamp и coords . Свойство timestamp содержит момент создания геолокационных данных. Свойство coords имеет семь атрибутов:

  • coords.latitude . Оценка широты.
  • coords.longitude . Оценка долготы.
  • coords.altitude . Оценка высоты.
  • coords.accuracy . Точность предоставленных оценок широты и долготы (в метрах).
  • coords.altitudeAccuracy . Точность предоставленной оценки высоты (в метрах).
  • coords.heading . Текущее направление движения пользовательского устройства (в градусах, отсчитываемых по часовой стрелке от направления на географический север).
  • coords.speed . Текущая путевая скорость устройства (в метрах в секунду) .

Гарантируется наличие лишь следующих трех атрибутов: coords.latitude , coords.longitude и coords.accuracy . Прочие атрибуты возвращают null , в зависимости от возможностей пользовательского устройства и взаимодействующего с ним сервера определения местоположения. Свойства heading и speed вычисляются на основе предшествующего положения пользователя (если это возможно).

«Работники» Web Worker спешат на помощь

Средства типа Web Worker («работник») устраняют проблемы одновременного исполнения. Web Worker — это ответ семейства технологий HTML5 на проблему однопоточного исполнения JavaScript. Web Worker исполняет процессы в потоке, отделенном от потока главной страницы, что гарантирует надлежащее выполнение основных функций этой страницы, таких как поддержание стабильного пользовательского интерфейса.

Web Worker — это JavaScript-файл, который загружается и исполняется в фоновом режиме. Это позволяет загружать JavaScript-файл динамически, а затем исполнять скрипт с помощью фонового процесса, не влияющего на пользовательский интерфейс. Работники типа Web Worker обладают ограниченным доступом, им разрешается передавать только строки. Поскольку Web Worker не использует поток пользовательского интерфейса браузера, ему не разрешен доступ к DOM. Worker способен использовать ссылки self и this для обеспечения глобального охвата своей деятельности. Связь Web Worker и родительской страницы реализуется с использованием модели на основе событий и метода postMessage() .

Вследствие своей многопоточной природы Web Worker способны пользоваться лишь подмножеством функций JavaScript. Возможности Web Worker:

  • Доступ к объекту navigator.
  • Использование объекта location (в режиме «Только чтение»).
  • Исполнение XMLHttpRequest для отсылки запросов по протоколу HTTP или HTTPS.
  • Настройка момента времени или интервала для деятельности с помощью setTimeout()/clearTimeout() и setInterval()/clearInterval() .
  • Доступ к кэшу приложений.
  • Импорт внешних скриптов с помощью метода importScripts() .
  • Порождение других Web Worker (потомок — subworker) должен иметь такое же происхождение, как и главная страница, и находиться в том же месте, что и родительский Worker).


Существуют два типа Web Worker: выделенный Web Worker и совместно используемый Web Worker

Выделенный Web Worker

Выделенный Worker связан с создавшим его скриптом и способен коммуницировать с другими Worker или с компонентами браузера. Однако он не способен коммуницировать с DOM.

Выделенный Worker создается посредством передачи имени JavaScript-файла новому экземпляру Worker. Мы создадим новый Worker с помощью конструктора Worker() посредством указания URI-идентификатора для исполняемого скрипта Worker. Чтобы создать выделенный Worker, введите показанный ниже код, который создает новый выделенный объект Worker .

Совместно используемый Web Worker

Совместно используемый Web Worker, как и выделенный Web Worker, не способен обращаться к DOM, а также имеет лишь ограниченный доступ к свойствам окна. Совместно используемый Web Worker способен коммуницировать только с другими совместно используемыми Web Worker в том же домене. Совместно используемый Web Worker создается посредством передачи имени JavaScript-файла новому экземпляру совместно используемого Worker.

Скрипты страницы способны коммуницировать с совместно используемыми Web Worker. Однако, в отличие от выделенных Web Worker, коммуницирование в данном случае осуществляется с помощью объекта port и прикрепления обработчика событий типа «сообщение». Кроме того, до первого использования postMessage() необходимо вызвать метод start() порта.

После того как скрипт Web Worker примет первое сообщение, совместно используемый Web Worker подключает обработчика событий к активному порту. В общем случае этот обработчик запускает собственный метод postMessage() для возвращения сообщения вызывающему коду, а затем метод start() порта генерирует процесс для разрешения сообщения.

Для создания совместно используемого Web Worker вы должны создать объект SharedWorker (а не объект Worker ). Следующий код демонстрирует создание нового объекта SharedWorker .

Построение страницы, содержащей два API-интерфейса

Мы спроектируем страницу, которая содержит базовые действующие модели API-интерфейсов Geolocation и Web Worker. Кроме того, мы используем API-интерфейс Google Map для отображения собранных данных в виде карты.

Структура нашей страницы показана на рисунке 1. Она содержит область Header, созданную с помощью тегов , область Section, созданную с помощью тегов , и область Aside, созданную с помощью тегов .

Рисунок 1. Разметка страницы API-интерфейса

После исполнения Web-страница отображается в виде, показанном на рисунке 2. Для просмотра геолокационных данных пользователь сначала должен выразить согласие с коллективным использованием его личной информации. Web Worker запускается при загрузке страницы. Если вы хотите посмотреть на найденные начальные данные, нажмите на клавишу Display Web Worker.

Рисунок 2. Web-страница API-интерфейса

HTML-файл

HTML-файл начинается со стандартной HTML5-информации, показанной в листинге 1. Раздел содержит вызов API-интерфейса Google Maps, который присваивает датчику значение False. Для использования API-интерфейса Google Maps разработчик должен указать, использует ли его приложение какой-либо датчик, например GPS, для выяснения местоположения. Для своего приложения с API-интерфейсом Google Maps мы должны декларировать значение параметра датчика как True или False. Значение датчика обязательно должно быть декларировано. Тег также содержит ссылки на файлы JavaScript и CSS3, которые используются для управления функциями и для форматирования Web-страницы.

Цукерберг рекомендует:  Моменты использования jQuery, в которых чаще всего путаются начинающие разработчики
Листинг 1. Начальный фрагмент HTML-файла

Тег содержит событие onLoad , которое вызывает функцию инициализации для геолокации (листинг 2). Эта функция проверяет, возможно ли использование геолокации в данном браузере. Функция инициализации находится в JavaScript-файле. Если браузер окажется способен коммуницировать с API-интерфейсом Geolocation API, то карта будет отображена.

Листинг 2. Инициализация Geolocation

Показанный в листинге 3 тег подлежащую отображению выходную информацию для объекта navigator.geolocation . Тег canvas для карты создается с использованием значений долготы и широты, возвращаемых описываемым API-интерфейсом. Кроме того, с помощью тегов отображаются данные Position coords .

Листинг 3. Карта геолокации и местоположение

Web Worker вычисляет начальные данные. Для отображения результатов вычислений, предоставляемых Web Worker, мы используем новый тег . Идентификатор ID, присвоенный в теге , представляет собой тот же идентификатор ID, который JavaScript-модуль использует для обозначения производимых им вычислений. Идентификаторы ID используются в тегах и , что делает их доступными для DOM. Если справочный идентификатор ID отсутствует, то JavaScript-модуль не будет знать, какой тег ему следует использовать: или . Выходная информация Web Worker показана в листинге 4.

Листинг 4. Выходная информация Web Worker

Сначала первая функция onClick используется в теге для отображения значений, вычисленных модулем Prime Number Web Worker, а затем вторая функция onClick используется для остановки Web Worker. Соответствующий код показан в листинге 5. Функция displayWorker() обеспечивает отображение результатов вычислений Web Worker после нажатия на соответствующую клавишу. Web Worker начинает вычисление начальных данных после того, как страница будет загружена.

Листинг 5. Входная информация для Web Worker

JavaScript-файл

API-интерфейсы, представленные на странице примера, функционируют на базе механизмов JavaScript. API-интерфейс Geolocation инициализируется с помощью функции initGeoApp() . Эта функция инициализируется событием onLoad() в теге .Она определяет, способен ли браузер использовать геолокацию (листинг 6). Если браузер способен использовать геолокацию, осуществляется вызов API-интерфейса Geolocation. В случае успешного результата осуществляется рисование карты с использованием атрибутов Position . После этого значения атрибутов выводятся под этой картой.

Листинг 6. Функции Geolocation

Извлечение значений осуществляется с помощью метода document.getElementById по идентификатору ID, который был предоставлен в HTML-файле. Метод document.getElementById принадлежит объекту document; доступ к нему осуществляется, как показано в листинге 7. Значения атрибутов Position хранятся здесь же, чтобы их можно было показать на экране под отображаемой картой.

Листинг 7. Использование метода getElementBy >

Этот раздел описывает объект LatLng API-интерфейса Google Map (листинг 8). Объект LatLng API-интерфейса Google Map предоставляет координатную информацию, необходимую для создания карты. Вы можете задать степень увеличения и некоторые другие опции, которые формируют конечный облик карты для пользователя.

Листинг 8. Опции Google Map

Обратите внимание, что для опции mapTypeID выбрано значение ROADMAP . Это значение соответствует «дорожной» карте, поэтому страница представляется в виде, показанном на рисунке 2. Возможны следующие четыре значения:

На рисунке 3 показано, как будет выглядеть эта же страница в случае выбора значения HYBRID.

Рисунок 3. Web-страница API-интерфейса с гибридной картой

Создайте карту с использованием идентификатора map_canvas , который является идентификатором для тега

Поместите на карту метку начального местоположения. Соответствующий код показан в листинге 9.

Листинг 9. Размещение метки начального местоположения

Web Worker начинает исполняться при инициализации страницы. Если пользователь желает увидеть результаты выполняемых вычислений, он может нажать на клавишу Display Web Worker, в результате чего будет вызвана функция displayWorker() . Соответствующий код показан в листинге 10.

Листинг 10. Web Worker

Если пользователь желает остановить Web Worker, он может нажать на клавишу Stop Web Worker, в результате чего будет вызвана функция stopWorker() , показанная в листинге 11.

Листинг 11. Терминация Worker

Файл Web Worker

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

Листинг 12. Вычисление начальных данных


CSS3-файл

Показанный в листинге 13 CSS3-файл обеспечивает форматирование отображаемой HTML5-страницы.

Листинг 13. CSS3-описания

Заключение

В данной статье описывается применение API-интерфейсов Geolocation и Web Worker. Эти два API-интерфейса были выбраны по одной простой причине — они наглядно демонстрируют инновационное и практичное применение API-интерфейсов HTML5. Интерфейс Geolocation — это прекрасный пример использования спецификации HTML5 для создания новых моделей ведения бизнеса. Интерфейс Web Worker играет не менее важную роль — он устраняет проблемы, порождаемые ограничениями многопоточного исполнения в JavaScript.

Два этих API-интерфейса являются идеальным примером использования HTML5 в коммерческих и общественных целях. Эти интерфейсы убедительно подтверждают высокую полезность и надлежащую управляемость функционально насыщенных Интернет-приложений на основе HTML5.

Ресурсы для скачивания

  • этот контент в PDF
  • Файлы примера (HTML, CSS3 и JavaScript) (HTML5APIs.zip | 10 KБ)

Похожие темы

  • Оригинал статьи: HTML5 fundamentals, Part 3: The power of HTML5 APIs.
  • Спецификации Web Workers specification , опубликованные организацией WHATWG, содержат необходимую подробную информацию по технологиям Web Worker.
  • Спецификации Geolocation API Level 2 Specification, опубликованные организацией W3C, содержат подробные сценарии применения и детальные требования, которые окажутся весьма полезными при обосновании коммерческого и социального применения этого API-интерфейса.
  • Build Web applications with HTML 5 (Построение Web-приложений с помощью HTML 5; developerWorks, март 2010 г.). В статье описывается несколько новых возможностей, представленных в спецификации HTML5.
  • Creating mobile Web applications with HTML 5, Part 1: Combine HTML 5, geolocation APIs, and Web services to create mobile mashups (Создание мобильных Web-приложений с помощью HTML 5. Часть 1. Совместное использование технологий HTML5, API-интерфейса Geolocation и Web-сервисов для создания мобильных mashup-приложений; developerWorks, май 2010 г.). Полезные рекомендации по разработке мобильных приложений.
  • Создание современных Web-сайтов с использованием HTML5 и CSS3 (developerWorks, март 2010 г.). Комплексная статья по технологиям HTML5 и CSS3.
  • In Новые элементы в спецификации HTML 5 (developerWorks, август 2007 г.). В данной статье приведена информация по нескольким новым тегам HTML5.
  • Web-сайт 5doctor предоставляет прекрасный обзор современных тенденций в области HTML5.
  • Раздел HTML5 Tag Reference на Web-сайте W3Schools.com содержит обширный перечень тегов, определений и примеров HTML5.
  • Web-сайт WHATWG предоставляет подробную информацию по спецификации HTML5.
  • Dojo Toolkit— это библиотека JavaScript-модулей с открытым исходным кодом, которая помогает быстро разрабатывать межплатформенные приложения и Web-сайты на базе JavaScript/Ajax.

Комментарии

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

Can I use File API?

Compatibility table for support of File API in desktop and mobile browsers.

Legend

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

File API

Global usage

Method of manipulating file objects in web applications client-side, as well as programmatically selecting them and accessing their data.

  1. 5.5
  2. 6
  3. 7
  4. 8
  5. 9
  6. 10

  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76

Firefox

  1. 2
  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31

  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72

Chrome

  1. 4
  2. 5

  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81

Safari

  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13
  20. TP

Opera

  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.1
  18. 13.2
  19. 13.3

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76

Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

Understand HTML5 FileReader API to Upload Image and Text Files

In this tutorial, I am going to share with you how you can use HTML5 FileReader API to upload images and text files from the client side in the web browser. HTML5 FileReader API provides a convenient way to communicate with local files through the local device. HTML5 FileReader API allows you to upload files or blob in the browser very easily.

What HTML5 FileReader API can do for us?

  • Single file upload
  • Multiple file upload
  • File reader allows uploads file using drag and drop
  • Save file reference for offline users
  • Restrict files upload quantity
  • Restrict files size limit
  • Provides file’s mimetype information
  • Allows to creates images thumbnail preview
  • Allow upload text file from client side
  • Helps to display file upload progress
  • Allow uploading any type of File or Blob

Step by step Explanation

1 – Understand Main Objects of HTML5 File API?

The JavaScript FileReader API works asynchronously, It allows a user to upload single or multiple files in the browser via the local device. When a user selects the files from the device then a FileList object is generated and it contains all the selected files within the FileList object.

Let’s understand HTML5 file API

FileList:

The FileList object contains the list of files, these files are uploaded via the local device.

A File is a single object uploaded via the local device. The File object belongs to the FileList object, a File object contains the file’s following information.

The Blob is also known as Binary Large Object, BLOB object is very useful it keeps the content of the file when uploaded via the local device.

2 – What are the core Methods of HTML5 FileReader API?

Below are the main methods we use for FileReader API.

FileReader Object

The FileReader() object helps you create a new FileReader. The FileReader API offers various asynchronous methods to read File or Blob objects. These methods are very helpful when you are working with large sized files. JavaScript file API allows you to create a new instance from HTML5 FileReader object.

We have successfully created a reader instance from FileReader object, now we can easily access FileReader API’s methods.
Let’s get to the business!

readAsDataURL() method

The readAsDataURL() method consumes a File or Blob and generates a base64 encoded data string. This data URL can be used to display the thumbnail preview in web and mobile browsers locally.

readAsText() method

  • The readAsText() method is used to read text files. This method comes with two parameters
  • The first parameter is used for the File or Blob from which data has to be read. The second parameter defines the string encoding which is to be used for the returned data. If this parameter is not declared then it will take UTF-8 as a default parameter.

abort() method

The abort() method aborts the read operation. This is very useful when reading large files.

readAsBinaryString() method

The readAsBinaryString() method gets the raw binary data from the file. This method is fully capable of reading any kind of File or Blob.

readAsArrayBuffer() method

The readAsArrayBuffer() method generates an ArrayBuffer via reading a File or Blob object. It returns Int8Array, Uint8Array, and byteLength arrays. The readAsArrayBuffer method is very helpful when converting images from one extension to another extension e.g. JPEG to PNG or vice versa.

3 – How to Work with HTML File Input Attribute?

Selecting a file through the local device is pretty straightforward, we just have to call the file input type using the HTML element. After that HTML5 filereader api will access the file. The following code will generate the file input field.

Setup onchange Event Listener with File Input Field

Once the file input field is generated, then don’t forget to add the onchange event listener. This event listener will trigger the given function when the file input field is used to upload the files.

Selecting Multiple Files

Use multiple tag along with, a file input field to select multiple files.

Цукерберг рекомендует:  REST vs GraphQL

4 – How to Check HTML5 File API’s Browser Support?

There are some old browsers which don’t support HTML5 File API, we are going to put a check. This check will alert the users if their browser doesn’t support HTML5 File API.

You can use Modernizr tool as well.

5 – How to Allow only Images to Select via HTML’s File Input Field?

There are multiple methods through which we can allow only images or any specific files to upload from users device, but I am going to share with you the easiest way through which you can achieve this functionality pretty easily.

01 – Allow only specific image type or extension to select via form file input field.

Include accept=»image/x-png,image/gif,image/jpeg» tag to file input field. Whichever image file type extensions you include within accept attribute, will allow access to be uploaded via the user device.

02 – Allow any image type to select via form file input field.

Include accept=»image/*» tag to file input field, This will include an image type to be uploaded from users device.

6 – How to Upload Single Image file using JavaScript FileReader API?

HTML File

In order to upload a single image file using JavaScript FileReader API, we must declare a file input HTML element in our HTML file. HTML file element allows a user to select any type of file.

To upload the image file from your browser locally you must bind an onchange() event listener to the file input element. This will trigger the showFile() function when a user uploads the image file from their local system.

JavaScript File

We are going to create showFile() function in javascript for uploading files using HTML5 file API. Within the below function we see following code var reader = new FileReader() , its a reader instance from FileReader API.

We have set up the onload method with reader instance for setting up demoImage image’s URL to selected image’s URL when the reader instance is loaded. Along with that, we are also passing the image file object to readAsDataURL(file) method using reader instance. By following this method we will also be able to convert a file object into a data URL in JavaScript.

7 – How to Upload Multiple Image files using HTML5 File Upload API?

In order to upload multiple image files using HTML5 File Upload API, we must mention an HTML file input field in our HTML file along with multiple HTML tag. This tag will allow users to select multiple files from their local device.

JavaScript

8 – How to Read a Text File from Client Side using HTML5 and JavaScript File API?

In order to read a text file from client side using HTML5 and JavaScript File API, we must declare a File input field. This tag will allow let the users select a text file from client side.

JavaScript

9 – Browser compatibility for JavaScript File Reader API

FileReader API is supported by most of the browsers, This API is also being loved by latest browsers as well.

Chrome Firefox Edge Safari Opera
10+ 3.6+ 12+ 6.0+ 11.5+

Browser compatibility source caniuse.com

10 – Some Useful Resources for File Reader API

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Utilizing the HTML5 File API to choose, upload, preview and see progress for multiple files

To me, something about HTML5 that makes it quite interesting is all the new support for file interaction. I’ve written about the File API and reading file information before, and I thought I’d expand on that and add uploads and progress bars.

Functionality

  • An input filed with the type=»file» and having the multiple attribute set to be able to choose more than one file at a time.
  • A drop area, i.e. element that you can drop files from your desktop/Finder/Explorer and upload them right away.

Please note that while files are uploaded in my demo, they are not actually saved on the server. It’s only to be able for you to see the file upload in Firebug/Web Inspector etc and also to present progress events.

Code needed

First, some simple HTML code:

The span elements are shown respectively hidden to give instructions and user feedback.

Adding change and drag events

Then we add events for detecting when the user has chosen any number of files for the input element or have dropped files on the drop area:

Don’t worry about all the events for drag and drop, they just have to be there, ok? ��

Traversing files

We then have access to the files, either through a files property on the input element, or as a files property on the evt.dataTransfer property for drag and drop events:

Reading file information and previewing image files

For each chosen file we can then display three things for them:

  • File name
  • File size (in bytes)
  • File type

An extra nifty feature, for any of the files that are an image, we can immediately read out the image data and display a preview of that image:

Uploading files

What we use to upload the files is a regular XMLHttpRequest object, and post the form appropriately:

Progress and load events

To complement our file upload, it’s nice to show the upload progress for each file, and also detect when they have finished uploading. That is done by the help of the progress and load events:

The complete code

Here’s the complete code for the example:

Web browser support

Web browser support is pretty good for this – it’s working in:

  • Firefox 3.5+
  • Google Chrome 5.0+
  • Safari 4.0+ (not complete support, and can be shaky/incorrect on Windows – but hey, who uses Safari on Windows anyway? �� )
  • Opera 11.10+ (partial support)
  • Internet Explorer 10+

For now, a reasonable fallback could be Plupload, which falls back to other technologies to try and do the trick.

Taking it to the next level

Here you have it. A nice, pretty simple script to read file information, preview thumbnails, upload files and offer the user feedback on the progress. Next steps would probably to be able to cancel uploads, testing out various fallback options for some web browsers etc. But hey, this is a good start, I think. ��

86 Comments

If you listen to the uploads event and use a cross-domain XHR, don’t forget you’ll have preflight requests.

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

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

После некоторого, опыта решил написать небольшую статью-шпаргалку о загрузке файлов с использованием возможностей HTML5, а именно File API.

  1. Поддержка браузерами.
  2. Загрузка через Form Data.
  3. Загрузка через File Reader.

1. Поддержка браузерами

Конечно же не все браузеры на данный момент поддерживают в полной мере эту возможность. Про IE благополучно забываем, так как он будет поддерживать File API только в 10 версии. С остальными, более прогрессивными браузерами, а это всего лишь Chrome, Firefox, Opera и Safari, тоже не все так гладко. Они конечно стараются быть «вперде», но пока не у всех получается.

В HTML 5 существует 2 способа считать и асинхронно отправить файл на сервер: через объекты File Reader и Form Data. В принципе, именно для загрузки файлов разницы нет, каким способом отправлять файлы на сервер. Если говорить совсем точно, то за отправку файлов несет ответственность объект XMLHttpRequest, а File Reader и Form Data всего лишь позволяют считать файл и «скормить» его XHR. Эти объекты предназначены для разных задач. File Reader предназначен для работы с файлами на стороне браузера. То есть еще до загрузки файла на сервер можно узнать его параметры, такие как вес, тип, дата создания и т. п. Картинки, например, можно сразу показывать пользователю, не загружая их на сервер. Form Data предназначен для создания форм и управления данными форм до загрузки на сервер. А как мы знаем, в формах и присутствует input type=«file», через который до этого момента мы и отправляли файлы. Таким образом можно создать форму, прикрепить к ней файл и через XHR отправить ее на сервер.

От лирики к делу. Рассмотрим оба примера загрузки. Но прежде небольшая заметка о том, что неплохо было бы определять возможности браузера по загрузке через File API. Для этого достаточно проверить наличие объектов File Reader или Form Data. Но! Safari до сих пор не сделал поддержку File Reader и работать с этим объектом у вас не получится. Яблофаги негодуют, а мы любим всех пользователей одинаково. Поэтому на данный момент самой правильной проверкой будет считаться наличие Form Data:

if (window.FormData === undefined) <
// Сообщаем отсталым браузерам, что они отсталые :-) Либо делаем альтернативную загрузку.
>

2. Загрузка через Form Data

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

$(«#drop-block»).bind( // #drop-block блок куда мы будем перетаскивать наши файлы
‘dragenter’,
function(e) <
// Действия при входе курсора с файлами в блок.
>) .bind(
‘dragover’,
function(e) <
// Действия при перемещении курсора с файлами над блоком.
>).bind(
‘dragleave’,
function(e) <
// Действия при выходе курсора с файлами за пределы блока.
>).bind(
‘drop’,
function(e) < // Действия при «вбросе» файлов в блок.
if (e.originalEvent.dataTransfer.files.length) <

// Отменяем реакцию браузера по-умолчанию на перетаскивание файлов.
e.preventDefault();
e.stopPropagation();

// e.originalEvent.dataTransfer.files — массив файлов переданных в браузер.
// e.originalEvent.dataTransfer.files[i].size — размер отдельного файла в байтах.
// e.originalEvent.dataTransfer.files[i].name — имя отдельного файла.
// Что какбэ намекает :-)

upload(e.originalEvent.dataTransfer.files); // Функция загрузки файлов.
>
>);

Ну и закодим непосредственно чтение и загрузку файлов:

// Сначала мы отправим пустой запрос на сервер.
// Это связано с тем, что иногда Safari некорректно обрабатывает
// первый файл.

var http = new XMLHttpRequest(); // Создаем объект XHR, через который далее скинем файлы на сервер.

// Процесс загрузки
if (http.upload && http.upload.addEventListener) <

http.upload.addEventListener( // Создаем обработчик события в процессе загрузки.
‘progress’,
function(e) <
if (e.lengthComputable) <
// e.loaded — сколько байтов загружено.
// e.total — общее количество байтов загружаемых файлов.
// Кто не понял — можно сделать прогресс-бар :-)
>
>,
false
);

// Действия после успешной загрузки.
// Например, так
// var result = $.parseJSON(this.response);
// можно получить ответ с сервера после загрузки.

> else <
// Сообщаем об ошибке загрузки либо предпринимаем меры.
>
>
>;

http.upload.addEventListener(
‘load’,
function(e) <
// Событие после которого также можно сообщить о загрузке файлов.
// Но ответа с сервера уже не будет.
// Можно удалить.
>);

http.upload.addEventListener(
‘error’,
function(e) <
// Паникуем, если возникла ошибка!
>);
>

var form = new FormData(); // Создаем объект формы.
form.append(‘path’, ‘/’); // Определяем корневой путь.
for (var i = 0; i < files.length; i++) <
form.append(‘file[]’, files[i]); // Прикрепляем к форме все загружаемые файлы.
>
http.open(‘POST’, ‘/upload.php’); // Открываем коннект до сервера.
http.send(form); // И отправляем форму, в которой наши файлы. Через XHR.
>

3. Загрузка через File Reader

File Reader собственно и предназначен для работы с файлами на стороне браузера. Попробуем загрузить файлы при помощи этого объекта. Напоминаем, что в Safari нет объекта File Reader!

// Для перетаскивания файлов используются все те же события.
// Но мы напишем их немного в другом виде, для разнообразия.
// Без комментариев.

var dropbox = $(‘#file-drag’);

dropbox[0].ondrop = function(e) <
var files = e.dataTransfer.files;
uploadFile(files[i]);
e.preventDefault();
e.stopPropagation();
return false;
>;

// Внимательный пользователь заметит некоторые отличия.
// Во-первых, события привязываем к 0 элементу массива объекта.
// Во-вторых, в функцию загрузки передаем по одному файлу.

// Функция чтения и загрузки

function uploadFile(file) <
var reader = new FileReader();
reader.onload = function() <
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener(«progress-bar», function(e) <
if (e.lengthComputable) <
// Прогресс-бра, ага ;-)
>
>, false);

// Помним про события load и error

xhr.onreadystatechange = function () <
if (this.readyState == 4) <
if(this.status == 200) <

// Составляем заголовки и тело запроса к серверу, в котором и отправим файл.

var boundary = «xxxxxxxxx»;
// Устанавливаем заголовки.
xhr.setRequestHeader(‘Content-type’, ‘multipart/form-data; boundary=»‘ + boundary + ‘»‘);
xhr.setRequestHeader(‘Cache-Control’, ‘no-cache’);

// Формируем тело запроса.
var body = «—» + boundary + «rn»;
body += «Content-Disposition: form-data; name=’superfile’; filename='» + unescape( encodeURIComponent(file.name)) + «‘rn»; // unescape позволит отправлять файлы с русскоязычными именами без проблем.
body += «Content-Type: application/octet-streamrnrn»;
body += reader.result + «rn»;
body += «—» + boundary + «—«;

// Пилюля от слабоумия для Chrome, который гад портит файлы в процессе загрузки.
if (!XMLHttpRequest.prototype.sendAsBinary) <
XMLHttpRequest.prototype.sendAsBinary = function(datastr) <
function byteValue(x) <
return x.charCodeAt(0) & 0xff;
>
var ords = Array.prototype.map.call(datastr, byteValue);
var ui8a = new Uint8Array(ords);
this.send(ui8a.buffer);
>
>

// Отправляем файлы.
if(xhr.sendAsBinary) <
// Только для Firefox
xhr.sendAsBinary(body);
> else <
// Для остальных (как нужно по спецификации W3C)
xhr.send(body);
>
>;

// Читаем файл
reader.readAsBinaryString(file);
>;

Данная статья является не инструкцией к применению, а всего лишь пособием для изучения возможностей HTML 5. Код не претендует на идеальность. Буду рад, если кто-то дополнит или поправит.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих