HTML5 File API загрузка файла с сервера и сохранение его в песочнице

я покажу вам, как загружать файлы с помощью XMLHttpRequest Уровень 2 и сохранить их с помощью API файловой системы или интерфейс FileSaver.

Загрузка Файлов

для загрузки файла вы будете использовать Уровень 2 XMLHttpRequest (он же XHR2), который поддерживает запросы кросс-происхождения, загрузку событий прогресса и загрузку/загрузку двоичных данных. В посте"новые трюки в XMLHttpRequest2" есть много примеров использования XHR2.

для загрузки файла в виде blob все, что вам нужно сделать, это указать responseType в "blob". Вы также можете использовать типы "текст", "arraybuffer"или " документ". Функция ниже загружает файл в url и отправляет его в success обратного вызова:

function downloadFile(url, success) {
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    xhr.responseType = "blob";
    xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4) {
            if (success) success(xhr.response);
        }
    };
    xhr.send(null);
}

на success callback получит в качестве аргумента экземпляр Blob, который может быть позже изменен и сохранен и / или загружен в сервер.

сохранение файлов с помощью API файловой системы

как я могу использовать... сайт указывает существует не так много браузеров с поддержкой API файловой системы. Для Firefox есть объяснение за отсутствие поддержки. Таким образом, вам придется использовать Chrome для этого.

сначала вам нужно будет запросить пространство для хранения, оно может быть временным или постоянным. Вы, вероятно, захотите иметь постоянный хранение, в этом случае у вас будет запрос квоты места для хранения заранее (некоторые факты):

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.storageInfo = window.storageInfo || window.webkitStorageInfo;

// Request access to the file system
var fileSystem = null         // DOMFileSystem instance
  , fsType = PERSISTENT       // PERSISTENT vs. TEMPORARY storage 
  , fsSize = 10 * 1024 * 1024 // size (bytes) of needed space 
  ;

window.storageInfo.requestQuota(fsType, fsSize, function(gb) {
    window.requestFileSystem(fsType, gb, function(fs) {
        fileSystem = fs;
    }, errorHandler);
}, errorHandler);

теперь у вас есть доступ к файловой системе можно сохранять и читать файлы из него. Функция ниже может сохранить blob по указанному пути в файловую систему:

function saveFile(data, path) {
    if (!fileSystem) return;

    fileSystem.root.getFile(path, {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.write(data);
        }, errorHandler);
    }, errorHandler);
}

как прочитать файл по его пути:

function readFile(path, success) {
    fileSystem.root.getFile(path, {}, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
                if (success) success(this.result);
            };

            reader.readAsText(file);
        }, errorHandler);
    }, errorHandler);
}

кроме readAsText способ по API FileReader можно назвать readAsArrayBuffer и readAsDataURL.

использование FileSaver

после " сохранение сгенерированных файлов на стороне клиента" очень хорошо объясняет использование этого API. Некоторым браузерам может понадобиться FileSaver.js для того чтобы saveAs интерфейс.

если вы используете его вместе с