存储/检索html 5文件对象，用于恢复已损坏的文件上载

Question

我正在尝试使用javascript和HTML5构建一个文件上传浏览器客户端。从网页中的文件输入表单(输入类型为" file ")，浏览器提供了一个带有HTML 5文件对象(http://www.w3.org/TR/FileAPI/)的文件句柄。上载使用此文件对象完成。但是，如果上传不完整，我希望恢复文件上传。为了工作，我需要文件对象与我，同时试图继续上传。cookies和html 5本地存储仅存储原始数据类型，而不存储对象。是否有一种方法来存储/检索文件对象，或者从对象中提取实际的文件句柄，存储它并使用其构造函数使file对象。

服务器将维护上传状态，客户端只需存储和检索此文件对象。对于客户端代码有什么建议/解决办法吗？

Answer 1

存储在locastorage中的数据必须是原始数据类型，在这里保存数据之前，您需要序列化任何数据。由于File对象不是原始数据类型之一，所以不能将其保存到localstorage中。不要忘记，它们对可以在localstorage中保存的最大数据是一个限制(5MB)，而对于cookies则更少。因此，这是不可能使用上述选项的。

但是，使用HTML5文件API可以是一个选项，也可以是您可以查看indexedDB的选项。我还没有试过它们，您可能会在使用它们时发现它们自身的局限性。

在这里发现两个类似的问题，你可以看看

Is it possible to save a File object in LocalStorage and then reload a File via FileReader when a user comes back to a page?

How do I save and restore a File object in local storage

Answer 2

很容易将文件存储在indexedDB中。indexedDB对于大型数据库很有用，但是即使您只是输入一个文件，它仍然可以工作。我知道@Gaurav提到了一些关于indexedDB的内容，但是我会给出一个如何存储它的例子：

var indexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB;

function storeFile(fileObj,callback){
    var openReq=indexedDB.open('upload-resume',1);
    openReq.onerror=function(e){
        console.error(e);
    }
    openReq.onupgradeneeded=function(e){
        var db=openReq.result;
        db.createObjectStore('upload-resume-store',{keyPath:'blah'});
    }
    openReq.onsuccess=function(e){
        var db=openReq.result;
        var req=db.transaction(['upload-resume-store'],'readwrite').objectStore('upload-resume-store').add({blah:'main',file:fileObj});
        req.onerror=function(e){
            console.error(e);
        }
        req.onsuccess=function(e){callback();}
    }
}

function getFile(callback){
    var openReq=indexedDB.open('upload-resume',1);
    openReq.onerror=function(e){
        console.error(e);
    }
    openReq.onupgradeneeded=function(e){
        //this should have already been called before...so if this is here that means that the file was never stored
        openReq.onsuccess=null;
        callback(false);
    }
    openReq.onsuccess=function(e){
        var req=db.transaction(['upload-resume-store'],'readonly').objectStore('upload-resume-store').get('blah');
        req.onerror=function(e){
            console.error(e);
        }
        req.onsuccess=function(e){
            callback(req.result);
        }
    }
}

我以前和indexedDB有过问题，告诉我如果它不正常的话。