github.com/mailru/FileAPI @2.0.20 sqlite



FileAPI

Набор JavaScript инструментов для работы с файлами.

Get started

Choose files


            <input name="files" type="file" multiple />












    <script>window.FileAPI = { staticPath: '/js/FileAPI/dist/' };</script>
    <script src="https://github.com/mailru/FileAPI/raw/2.0.20/js/FileAPI/dist/FileAPI.min.js"></script>
    <script>
        FileAPI.event.on(choose, 'change', function (evt){
            var files = FileAPI.getFiles(evt); // Retrieve file list

            FileAPI.filterFiles(files, function (file, info/**Object*/){
                if( /^image/.test(file.type) ){
                    return  info.width >= 320 && info.height >= 240;
                }
                return  false;
            }, function (files/**Array*/, rejected/**Array*/){
                if( files.length ){
                    // Создаем предпросмотр 100x100
                    FileAPI.each(files, function (file){
                        FileAPI.Image(file).preview(100).get(function (err, img){
                            images.appendChild(img);
                        });
                    });

                    // Загружаем файлы
                    FileAPI.upload({
                        url: './ctrl.php',
                        files: { images: files },
                        progress: function (evt){ /* ... */ },
                        complete: function (err, xhr){ /* ... */ }
                    });
                }
            });
        });
    </script>

---

Setup options

Отредактируйте файл crossdomain.xml и разместите его в корне домена, на который будут загружаться файлы.

    <script>
        window.FileAPI = {
              debug: false  // дебаг режим, смотрите Console
            , cors: false   // если используете CORS -- `true`
            , media: false  // если используете веб-камеру -- `true`
            , staticPath: '/js/FileAPI/dist/' // путь к '*.swf'
            , postNameConcat: function (name, idx){
                // Default: object[foo]=1&object[bar][baz]=2
                // .NET: https://github.com/mailru/FileAPI/issues/121#issuecomment-24590395
                return  name + (idx != null ? '['+ idx +']' : '');
            }
        };
    </script>
    <script src="https://github.com/mailru/FileAPI/raw/2.0.20/js/FileAPI/dist/FileAPI.min.js"></script>



    <script>
        window.FileAPI = { /* etc. */ };
        require(['FileAPI'], function (FileAPI){
            // ...
        });
    </script>

---

getFiles(input:HTMLInputElement|Event|$.Event):Array

Получить список файлов из input элемента, или event, также поддерживается jQuery.

• input — HTMLInputElement, change и drop события, jQuery коллекция или jQuery.Event

var el = document.getElement('my-input');
FileAPI.event.on(el, function (evt/**Event*/){
    // Получить список файлов из `input`
    var files = FileAPI.getFiles(el);

    // или события
    var files = FileAPI.getFiles(evt);
});

---

getInfo(file:Object, callback:Function):void

Получить информацию о файле (см. FileAPI.addInfoReader).

• file — объект файла (https://developer.mozilla.org/en-US/docs/DOM/File)
• callback — функция, вызывается по завершению сбора информации

// Получить информацию о изображении (FileAPI.exif.js подключен)
FileAPI.getInfo(file, function (err/**String*/, info/**Object*/){
    if( !err ){
        console.log(info); // { width: 800, height: 600, exif: {..} }
    }
});

// Получить информацию о mp3 файле (FileAPI.id3.js included)
FileAPI.getInfo(file, function (err/**String*/, info/**Object*/){
    if( !err ){
        console.log(info); // { title: "...", album: "...", artists: "...", ... }
    }
});

---

filterFiles(files:Array, filter:Function, callback:Function):void

Отфильтровать список файлов, используя дополнительную информацию о них. см. FileAPI.getInfo или FileAPI.addInfoReader.

• files — оригинальный список файлов
• filter — функция, принимает два аргумента: file — сам файл, info — дополнительная информация
• callback — функция: list — список файлов, подошедшие под условия, other — все остальные.

// Получаем список файлов
var files = FileAPI.getFiles(input);

// Фильтруем список
FileAPI.filterFiles(files, function (file/**Object*/, info/**Object*/){
    if( /^image/.test(file.type) && info ){
        return  info.width > 320 && info.height > 240;
    } else {
        return  file.size < 20 * FileAPI.MB;
    }
}, function (list/**Array*/, other/**Array*/){
    if( list.length ){
        // ..
    }
});

---

getDropFiles(evt:Event|$.Event, callback:Function):void

Получить весь список файлов, включая директории.

• evt — drop event
• callback — функция, принимает один аргумент — список файлов

FileAPI.event.on(document, 'drop', function (evt/**Event*/){
    evt.preventDefault();

    // Получаем все файлы
    FileAPI.getDropFiles(evt, function (files/**Array*/){
        // ...
    });
});

---

upload(opts:Object):XmlHttpRequest

Загрузка файлов на сервер (последовательно). Возвращает XHR-подобный объект. Помните, для корректной работы flash-транспорта, тело ответа сервера не должно быть пустым, например можно ответить простым текстом "ok".

• opts — объект настроек, см. раздел Upload options

var el = document.getElementById('my-input');
FileAPI.event.on(el, 'change', function (evt/**Event*/){
    var files = FileAPI.getFiles(evt);
    var xhr = FileAPI.upload({
        url: 'http://rubaxa.org/FileAPI/server/ctrl.php',
        files: { file: files[0] },
        complete: function (err, xhr){
            if( !err ){
                var result = xhr.responseText;
                // ...
            }
        }
    });
});

---

addInfoReader(mime:RegExp, handler:Function):void

Добавить обработчик, для сбора информации о файле. см. также: FileAPI.getInfo и FileAPI.filterFiles.

• mime — маска mime-type
• handler — функция, принимает два аргумента: file объект и complete функция обратного вызова

FileAPI.addInfoReader(/^image/, function (file/**File*/, callback/**Function*/){
    // http://www.nihilogic.dk/labs/exif/exif.js
    // http://www.nihilogic.dk/labs/binaryajax/binaryajax.js
    FileAPI.readAsBinaryString(file, function (evt/**Object*/){
        if( evt.type == 'load' ){
            var binaryString = evt.result;
            var oFile = new BinaryFile(binaryString, 0, file.size);
            var exif  = EXIF.readFromBinaryFile(oFile);
            callback(false, { 'exif': exif || {} });
        }
        else if( evt.type == 'error' ){
            callback('read_as_binary_string');
        }
        else if( evt.type == 'progress' ){
            // ...
        }
    });
});

---

readAsDataURL(file:Object, callback:Function):void

Чтение содержимого указанного файла как dataURL.

• file — файл для чтения
• callback — функция обработчик

FileAPI.readAsDataURL(file, function (evt/**Object*/){
    if( evt.type == 'load' ){
        // Всё хорошо
        var dataURL = evt.result;
    } else if( evt.type =='progress' ){
        var pr = evt.loaded/evt.total * 100;
    } else {
        // Ошибка
    }
})

---

readAsBinaryString(file:Object, callback:Function):void

Чтение содержимого указанного файла как BinaryString.

• file — файл для чтения
• callback — функция обработчик

FileAPI.readAsBinaryString(file, function (evt/**Object*/){
    if( evt.type == 'load' ){
        // Всё хорошо
        var binaryString = evt.result;
    } else if( evt.type =='progress' ){
        var pr = evt.loaded/evt.total * 100;
    } else {
        // Ошибка
    }
})

---

readAsArrayBuffer(file:Object, callback:Function):void

Чтение содержимого указанного файла как ArrayBuffer.

• file — файл для чтения
• callback — функция обработчик

FileAPI.readAsArrayBuffer(file, function (evt/**Object*/){
    if( evt.type == 'load' ){
        // Всё хорошо
        var arrayBuffer = evt.result;
    } else if( evt.type =='progress' ){
        var pr = evt.loaded/evt.total * 100;
    } else {
        // Ошибка
    }
})

---

readAsText(file:Object, callback:Function):void

Чтение содержимого указанного файла как text.

• file — файл для чтения
• callback — функция обработчик

FileAPI.readAsText(file, function (evt/**Object*/){
    if( evt.type == 'load' ){
        // Всё хорошо
        var text = evt.result;
    } else if( evt.type =='progress' ){
        var pr = evt.loaded/evt.total * 100;
    } else {
        // Ошибка
    }
})

---

readAsText(file:Object, encoding:String, callback:Function):void

Чтение содержимого указанного файла как text в нужной кодировке.

• encoding — строкой с указанием кодировки. По умолчанию UTF-8.

FileAPI.readAsText(file, "utf-8", function (evt/**Object*/){
    if( evt.type == 'load' ){
        // Всё хорошо
        var text = evt.result;
    } else if( evt.type =='progress' ){
        var pr = evt.loaded/evt.total * 100;
    } else {
        // Ошибка
    }
})

---

Опции загрузки

url:String

Строка, содержащая адрес, на который отправляется запрос.

---

data:Object

Дополнительные данные, которые должны быть отправлены вместе с файлом.

var xhr = FileAPI.upload({
    url: '...',
    data: { 'session-id': 123 },
    files: { ... },
});

---

headers:Object

Дополнительные заголовки запроса, только HTML5.

var xhr = FileAPI.upload({
    url: '...',
    headers: { 'x-upload': 'fileapi' },
    files: { .. },
});

---

chunkSize:Number

Размер части файла в байтах, только HTML5.

var xhr = FileAPI.upload({
    url: '...',
    files: { images: fileList },
    chunkSize: 0.5 * FileAPI.MB
});

---

chunkUploadRetry:Number

Количество попыток загрузки одной части, только HTML5.

var xhr = FileAPI.upload({
    url: '...',
    files: { images: fileList },
    chunkSize: 0.5 * FileAPI.MB,
    chunkUploadRetry: 3
});

--

imageTransform:Object

Правила модификации оригинально изображения.

var xhr = FileAPI.upload({
    url: '...',
    files: { image: imageFiles },
    // Changes the original image
    imageTransform: {
        // Ресайз по боьшой строне
        maxWidth: 800,
        maxHeight: 600,
        // Добавляем водяной знак
        overlay: [{ x: 10, y: 10, src: '/i/watemark.png', rel: FileAPI.Image.RIGHT_BOTTOM }]
    }
});

--

imageTransform:Object

Правила для нарезки дополнительных изображения на клиенте.

var xhr = FileAPI.upload({
    url: '...',
    files: { image: imageFiles },
    imageTransform: {
        // Ресайз по большой строне
        'huge': { maxWidth: 800, maxHeight: 600 },
        // Ресайз и кроп
        'medium': { width: 320, height: 240, preview: true },
        // ресайз и кроп + водяной знак
        'small': {
            width: 100, height: 100,
            // Добавляем водяной знак
            overlay: [{ x: 5, y: 5, src: '/i/watemark.png', rel: FileAPI.Image.RIGHT_BOTTOM }]
        }
    }
});

--

imageTransform:Object

Конвертация всех изображений в jpeg или png.

var xhr = FileAPI.upload({
    url: '...',
    files: { image: imageFiles },
    imageTransform: {
        type: 'image/jpeg',
        quality: 0.86 // качество jpeg
    }
});

imageOriginal:Boolean

Отправлять исходное изображение на сервер или нет, если определен imageTransform вариант.

--

imageAutoOrientation:Boolean

Автоматический поворот изображения на основе EXIF.

--

prepare:Function

Подготовка опций загрузки для конкретного файла.

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    prepare: function (file/**Object*/, options/**Object*/){
        options.data.secret = utils.getSecretKey(file.name);
    }
});

--

upload:Function

Начало загрузки

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    upload: function (xhr/**Object*/, options/**Object*/){
        // ...
    }
});

--

fileupload:Function

Начало загрузки файла

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    fileupload: function (file/**Object*/, xhr/**Object*/, options/**Object*/){
        // ...
    }
});

--

progress:Function

Общий прогресс загрузки файлов.

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    progress: function (evt/**Object*/, file/**Object*/, xhr/**Object*/, options/**Object*/){
        var pr = evt.loaded/evt.total * 100;
    }
});

--

fileprogress:Function

Прогресс загрузки файла.

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    fileprogress: function (evt/**Object*/, file/**Object*/, xhr/**Object*/, options/**Object*/){
        var pr = evt.loaded/evt.total * 100;
    }
});

--

complete:Function

Завершение загрузки всех файлов.

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    complete: function (err/**String*/, xhr/**Object*/, file/**Object/, options/**Object*/){
        if( !err ){
            // Все файлы загружены успешно
        }
    }
});

--

filecomplete:Function

Конец загрузки файла.

var xhr = FileAPI.upload({
    url: '...',
    files: { .. }
    filecomplete: function (err/**String*/, xhr/**Object*/, file/**Object/, options/**Object*/){
        if( !err ){
            // Файл загружен успешно
            var result = xhr.responseText;
        }
    }
});

---

File object

name

Имя файла.

type

MIME type

size

Размер файла в байтах.

---

FileAPI.event

on(el:HTMLElement, events:String, handler:Function):void

Добавить функцию обработки события.

• el — DOM элемент.
• events — одно или нескольких разделенных пробелами типов событий.
• handler — функция обработчик события.

---

<a