Файлы и

JavascriptDASHUKEVICH VLADIMIR

21.05.2014

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

Что такое файл в JS

File и FileList API

File это просто 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.

Как выбрать несколько файлов 1. <input type="file" multiple />

А папку?

<input type="file" webkitdirectory />

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

Cловить drop и dragover

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

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

Selenium и тесты

Webdrivers и Input поле

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

drop

CTRL+C и CTRL+V (Chrome)

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

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

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

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

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

2. Ловим paste

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

Ты крут!!!

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

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

1. Ловим dragstart

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

e.dataTransfer.setData("DownloadURL",

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

И как мы можем это

использовать?

1. Изменение картинок

2. Парсинг XLS файлов

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

4. Парсинг PDF

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

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

xls

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

xlsx

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

JSZip

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

zip.js

PDF.js

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

Сохранить

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

(Chrome)

2. execCommand (IE)

3. localStorage

4. indexDB

Статья

http://tinyurl.com/lusagk5

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