Jquery работа с файлами

Содержание

Объект 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.

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

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

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

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

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

Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.

В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое – что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress, то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).

Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.

Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.

Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели.

AJAX Загрузка файлов: общий пример

Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега

У меня 5 текстовых полей, в которых лежат некие значения.

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

Поиск в Google не дал результатов, ибо решения я нашел только на PHP.

3 ответа 3

File System API – не стандартизированное и не утверждённое W3C API, которой будет работать только в браузерах на движке Blink. Этот вариант подойдёт Вам только в том случае, если Вы пишите дополнение для Chrome или веб-аппликацию под конкретный браузер.

Пример записи и чтения файла (или нескольких):

П.С. Не могу добавить в ответ больше двух ссылок (из-за ограничения по репутации) но поиск по "FileReader API" даст вам множество дополнительных подсказок и примеров 😉

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *