HTML5 File API从服务器下载文件并将其保存在沙箱中

Question

我正在尝试理解HTML5 API.我正在设计Web应用程序,浏览器客户端需要从服务器下载多个文件; 用户将对下载的文件和应用程序执行某些操作,而不是需要在用户上保存状态.我知道浏览器只能将这些文件保存到它的沙盒中,只要用户可以在第二次启动应用程序时检索这些文件就可以了.我应该使用BlobBuilder还是FileSaver？我在这里有点失落.

Answer 1

我将向您展示如何使用XMLHttpRequest Level 2下载文件,并使用FileSystem API或FileSaver界面保存它们.

下载文件

要下载文件,您将使用XMLHttpRequest Level 2(又名XHR2),它支持跨源请求,上传进度事件以及上载/下载二进制数据.在" XMLHttpRequest2中的新技巧 "一文中,有很多使用XHR2的例子.

要将文件作为blob下载,您只需指定responseType"blob"即可.您还可以使用"text","arraybuffer"或"document"类型.下面的函数下载文件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回调将收到的参数,可以在以后修改和保存和/或上传到服务器的Blob的一个实例.

使用FileSystem API保存文件

正如我可以使用...站点指出,没有很多浏览器支持FileSystem 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方法之外,根据FileReader API你可以调用readAsArrayBuffer和readAsDataURL.

使用FileSaver

" 在客户端保存生成的文件 "这一帖子很好地解释了该API的使用.某些浏览器可能需要FileSaver.js才能拥有该saveAs接口.

如果将它与downloadFile函数一起使用,可以使用以下内容:

downloadFile('image.png', function(blob) {
    saveAs(blob, "image.png");
});

当然,如果用户可以将图像可视化,操纵它然后将其保存在他的驱动器中,那将更有意义.

错误处理程序

只是为了实现这个例子:

function errorHandler(e) {
    var msg = '';

    switch (e.code) {
        case FileError.QUOTA_EXCEEDED_ERR:
            msg = 'QUOTA_EXCEEDED_ERR';
            break;
        case FileError.NOT_FOUND_ERR:
            msg = 'NOT_FOUND_ERR';
            break;
        case FileError.SECURITY_ERR:
            msg = 'SECURITY_ERR';
            break;
        case FileError.INVALID_MODIFICATION_ERR:
            msg = 'INVALID_MODIFICATION_ERR';
            break;
        case FileError.INVALID_STATE_ERR:
            msg = 'INVALID_STATE_ERR';
            break;
        default:
            msg = 'Unknown Error';
            break;
    };

    console.log('Error: ' + msg);
}

有用的链接

• 在客户端保存生成的文件
• 探索FileSystem API
• XMLHttpRequest2中的新技巧
• 使用文件API在JavaScript中读取文件