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

我将向您展示如何使用 XMLHttpRequest Level 2下载文件，并将其与 FileSystem API或 FileSaver interface一起保存。

下载文件

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

要将文件下载为一个blob，您所做的都是将responseType指定为“blob”。您也可以使用类型“文本”，“数组缓冲”或“文档”。下面的功能下载url中的文件并将其发送到成功回调：

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);
}

成功回调将作为参数接收Blob的实例，该实例可以稍后修改并保存和/或上传到服务器。

使用FileSystem 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);
}

除了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