Files and JS

Файлы и

JavascriptDASHUKEVICH VLADIMIR

21.05.2014

Файлы как запретный плод

Что же такое File в JS?

File и FileList API

Что такое Blob?

Blob - это просто)

Что такое Blob?

Как достать из него

информацию?

Но нам нужно их прочитать!

Даешь FileReader!!!

Читаем

File и FileReader

Как получить доступ к

файлам?

ActiveX как решение проблемы

var ExcelSheet = new

ActiveXObject("Excel.Sheet");

ExcelSheet.ActiveSheet.Cells(1,1).Value = "A";

ExcelSheet.SaveAs("C:\\TEST.XLS");

Oooooups!

NPAPI как решение проблемы

Вы действительно круты!

Получение доступа к

файлам

Перетащи меня в браузер

Input c типом “file“

Словить “drop“ событие на любом элементе

CTRL+C -> CTRL+V

Получить с сервера

Input c типом “file“

1. <input type="file" />

2. Слушаем событие “change” этого

элемента

3. В IE10+ смотрим свойство files.

<input type="file" multiple />

<input type="file" webkitdirectory />

Drag and

drop

Перетащи меня в браузер

Cловить drop и dragover

Посмотреть в dataTransfer свойство

пришедшего объекта Event

event.dataTransfer.files

event.dataTransfer.items

Webdrivers и Input поле

Отправить самодельное событие

drop

Copy/paste

CTRL+C и CTRL+V (Chrome)

1. Ловим событие paste

2. Заглядываем в clipboardData

Копирование части XLS

CTRL+C и CTRL+V (Все)

1. Создаем <div contenteditable ></div>

2. Ловим paste

3. По Timeout берем содержимое

(base64)

Ты крут!!!

Получаем с сервера

Берем с сервера

Перетащи меня из браузера

1. Ловим dragstart

2. Даем ссылку:

e.dataTransfer.setData("DownloadURL", "ap

plication/pdf:doc.pdf:http://you.com");

Разрушаем

мечты(

Конец уже близок)

Что же нам делать с

файлами на клиенте?

Создать ссылку на

файл)

Парсим XSL и XSLX файлы

XLS - https://github.com/SheetJS/js-

xls

XLSX - https://github.com/SheetJS/js-

xlsx

XLSX.read(data, {type: 'binary'});

Поддержка

Браузеры: IE6+ (base64)

Форматы:

ZIP, base64, binary, XLSX, XLS

M, XLSB.

Сжатие данных

JSZip

new JSZip(zipDataFromXHR, {base64:false});

zip.js

Safari 5 и IE9 (до 4GB)

Парсинг

PDF

PDF.js

https://github.com/mozilla/pdf.js

PDF.js

Demo от Mozilla

http://mozilla.github.io/pdf.js/web/viewer.ht

ml

Остальное

Редактирование картинок

Редактирование звуков

Редактирование других форматов

Сохранени

е

Сохранить

1. Iframe с ссылкой на файл

(Chrome, FireFox)

2. execCommand (IE < 10) и

msSaveOrOpenBlob(blob, defaultName

);

3. localStorage

4. indexDB

Статья

http://tinyurl.com/lusagk5

Ваши вопросы?