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

最佳答案

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

##下载文件##

要下载文件，您将使用 XMLHttpRequest Level 2(也称为 XHR2)，它支持跨源请求、上传进度事件和二进制数据的上传/下载。在帖子“New Tricks in XMLHttpRequest2”中有很多使用 XHR2 的例子。

要将文件下载为 blob，您只需将 responseType 指定为“blob”即可。您还可以使用“文本”、“数组缓冲区”或“文档”类型。下面的函数下载 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 实例作为参数，稍后可以对其进行修改、保存和/或上传到服务器。

##使用文件系统 API 保存文件##

作为我可以使用... 网站 points out支持 FileSystem API 的浏览器并不多。对于 Firefox there's an explanation因为缺乏支持。因此，您必须使用 Chrome 来执行此操作。

首先您必须申请一个存储空间，它可以是临时的也可以是持久的。您可能希望拥有持久存储，在这种情况下，您需要预先请求存储空间配额 ( some facts ):

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##

帖子“Saving Generated Files on Client-Side”很好地解释了这个 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);
}

##有用的链接##

• Saving Generated Files on the Client-Side
• Exploring the FileSystem APIs
• New Tricks in XMLHttpRequest2
• Reading Files in JavaScript Using the File APIs

关于HTML5 File API 从服务器下载文件并将其保存在沙箱中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13752984/