константин лебедев

FileAPI: Загрузка и обработка файлов

Что было

Flash
5

Что было

HTML/JS
6

Требования

• Множественный выбор файлов
• Получение информации (название, размер, тип)
• Создание пред-просмотра на клиенте
• Масштабирование, кадрирование и поворот
• Загрузка на сервер + CORS

7


• Не зависеть от вѐрстки
• Никакой бизнес-логики
• Расширяемость
• Самодостаточность

8

Поддержка

• Chrome 10+
• FireFox 3.6+
• Opera 11.1+
• Safari 5.4+

12

ПОЛУЧЕНИЕ СПИСКА
ФАЙЛОВ

14

HTML5

<input id="file" type="file" multiple />
<script>
var input = document.getByElementId("file");
input.addEventListener("change", function (){
var files = input.files;
}, false);
</script> 15

HTML5

<script>
}, false);
</script> 16

HTML5

<script>
}, false);
</script> 17

Flash

FLASH

Flash --> jsFunc([{
id: "346515436346", // уникальный идентификатор
name: "hello-world.png", // название файла
type: "image/png", // mime-type
size: 43325 // рамер
}, {
// etc.
}]) 20

Взаимодействие

flash.cmd("imageTransform", {
id: "346515436346", // идентификатор файла
matrix: { }, // "матрица" трансформации
callback: "__UNIQ_NAME__" // размер
});

API
<span class="js-fileapi-wrapper" style="position: relative">
</span>
<script>
FileAPI.event.on(input, "change", function (){
var files = FileAPI.getFiles(input);
}, false);
</script>
22

API
<span class="js-fileapi-wrapper" style="position: relative">
</span>
<script>
FileAPI.event.on(input, "change", function (evt){
var files = FileAPI.getFiles(evt);
}, false);
</script>
23

ФИЛЬТРАЦИЯ

24

FileReader

• readAsDataURL(file)
• readAsBinaryString(file)
• readAsArrayBuffer(file)
• readAsText(file[, encoding])

Фильтрация
FileAPI.filterFiles(files, function (file, info){

return file.size < 10 * FileAPI.MB;

}, function (files, ignore){
if( files.length > 0 ){
// ...
}
});
26

Информация о файле

FileAPI.addInfoReader(/^audio/, function (file, callback){
// собираем нужную информацию
// и возвращаем еѐ
callback(
false, // или текст ошибки
{ artist: "...", album: "...", title: "...", ... }
);
});

Информация о файле

FileAPI.getInfo(audioFile, function (err, tags){
if( !err ){
var li = document.createElement("li");
li.innerHTML = tags.artist +" – "+ tags.title;
ul.appendChild(li);
}
});

Предпросмотр

DataURI


DataURI

Base64


DataURI

<img/>
Base64

―data:image/png;base64,‖ + Base64


HTML5
• FileReader.readAsDataURL(file) — позволяет
прочесть содержимое файла как DataURL
• URL.createObjectURL(file) — создает
ссылку, указывающую на файл


HTML5
• FileReader.readAsDataURL(file) — позволяет
прочесть содержимое файла как DataURL
• URL.createObjectURL(file) — создает
ссылку, указывающую на файл
• URL.revokeObjectURL(file) — убрать ссылку

FileAPI.Image

• crop(x, y, width, height) — кадрирование
• resize(width[, height]) — масштабирование
• rotate(deg) — поворот
• preview(width, height) — кадрирует и масштабирует
• get(callback) — получить итоговое изображение

36

Matrix
{ // параметры фрагмента оригинала
sx: Number,
sy: Number,
sw: Number,
sh: Number,

// требуемые размеры
dw: Number,
dh: Number,
deg: Number
}
37

FileAPI.Image
FileAPI.Image(imageFle)
.crop(300, 300)
.resize(100, 100)
.get(function (err, img){
if( !err ){
images.appendChild(img);
}
})
;

38

Сжатие

5197х4987

Сжатие

5197х4987 2598х2493

Сжатие x 2

5197х4987 2598х2493 1299х1246

Сжатие x 5

5197х4987 2598х2493 1299х1246

100х100

Сжатие

Серия


• Без обновления страницы
• Процесс загрузки
• Получить ответ от сервера

Загрузка

<form
action="/upload"
method="post"
enctype="multipart/form-data">
<input name="files" type="file" />
<input name="foo" value="bar" type="hidden" />
</form>

Загрузка

<form
target="__UNIQ__" Уникальный идентификатор
action="/upload"
method="post"
enctype="multipart/form-data">
<iframe name="__UNIQ__"></iframe>
<input name="files" type="file" />
<input name="foo" value="bar" type="hidden" />
</form>

Загрузка

XMLHttpRequest level 2

FormData

Загрузка
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", file);

// отправояем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)

Загрузка
form.append("attach", file);

// отправляем на сервер
xhr.send(form)

Загрузка
canvasToBlob(canvas, function (blob){
form.append("attach", blob, "filename.png");

// отправляем на сервер
xhr.send(form)
});

Загрузка
dataURL = canvas.toDataURL(―image/png‖);

<cavnas/> DataURL

Загрузка
base64 = dataURL.replace(/^data:[^,]+,/, ―‖);

<cavnas/> DataURL Base64

Загрузка
base64 = dataURL.replace(/^data:[^,]+,/, ―‖);
binaryString = window.atob(base64);

<cavnas/> DataURL Base64

BinaryString

Multipart
var uniq = '1234567890';
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=_'+uniq);
xhr.sendAsBinary([
'--_'+ uniq
, 'Content-Disposition: form-data; name="my-file"; filename="hello-world.png"'
, 'Content-Type: image/png'
, ''
, binaryString
, '--_'+ uniq +'--'
].join('rn'));
56

Загрузка
var xhr = FileAPI.upload({
url: '/upload',
data: { foo: 'bar' },
headers: { 'Session-Id': '...' },
files: { images: imageFiles, others: otherFiles },
imageTransform: { maxWidth: 1024, maxHeight: 768 },
upload: function (xhr){},
progress: function (event, file){},
complete: function (err, xhr, file){},
fileupload: function (file, xhr){},
fileprogress: function (event, file){},
filecomplete: function (err, xhr, file){}
});
57

Загрузка
var xhr = FileAPI.upload({
url: '/upload',
data: { foo: 'bar' },
headers: { 'Session-Id': '...' },
files: { images: imageFiles, others: otherFiles },
imageTransform: { maxWidth: 1024, maxHeight: 768 },
upload: function (xhr){},
progress: function (event, file){},
complete: function (err, xhr, file){},
fileupload: function (file, xhr){},
fileprogress: function (event, file){},
filecomplete: function (err, xhr, file){}
});
58

Загрузка
imageTransform:
{
huge: { maxWidth: 800, maxHeight: 600, rotate: 90 },
medium: { width: 320, height: 240, preview: true },
small: { width: 100, height: 120, preview: true }
}

XHR
var xhr = FileAPI.upload({ … });

60

XHR
var xhr = FileAPI.upload({ … });

• status — HTTP status code
• statusText — HTTP status text
• responseText — ответ сервера
• getResponseHeader(name) — получить заголовок ответа сервера
• getAllResponseHeaders() — получить все заголовки
• abort() — отменить загрузку

61

Drag’n’Drop
<div class="dropzone"></div>

Перетащите файлы сюда

Drag’n’Drop
<div class="dropzone dropzone_hover"></div>

4

Drag’n’Drop
<div id="el" class="dropzone"></div>
<script>
var el = document.getElementById("el");
FileAPI.event.dnd(el, function (over){
if( ever ){
el.classList.add("dropzone_hover");
} else { 4
el.classList.remove("dropzone_hover");
}
}, function (files){
uploadFiles(files);
});
</script>

Drag’n’Drop
<div id="el" class="dropzone"></div>
<script>
var el = document.getElementById("el");
FileAPI.event.dnd(el, function (over){
if( ever ){
el.classList.add("dropzone_hover");
4
} else {
el.classList.remove("dropzone_hover");
}
}, function (files){
uploadFiles(files);
});
</script>

Drag’n’Drop

function uploadFiles(dropFiles){
FileAPI.upload({
url: "/upload",
files: { attaches: dropFiles },
complete: function (err, xhr){
if( !err ){ 4
// файлы загружены
}
}
});
}

https://github.com/mailru/FileAPI
Константин Лебедев
JavaScript архитектор
k.lebedev@corp.mail.ru

константин лебедев

More Related Content

What's hot (19)

Similar to константин лебедев (10)

More from kuchinskaya (20)

константин лебедев

Editor's Notes