Question

我正在尝试使用javascript和HTML构建文件上传浏览器客户端5.从网页中的文件输入表单（输入类型“文件”），浏览器提供带有html 5文件对象的文件句柄（http://www.w3.org/TR/FileAPI/ ）。使用此文件对象完成上载。但是如果上传不完整，我希望恢复文件上传。为了这个工作我尝试恢复上传时需要File对象。 cookies和html 5 localstorage仅存储原始数据类型而不存储对象。有没有办法存储/检索文件对象，或者从对象中提取实际文件句柄，存储它并使用其构造函数生成File对象。

服务器将维护上传状态，只有客户端需要做的是存储和检索此文件对象。有关客户端代码的任何建议/解决方法吗？

Answer 1

locastorage中存储的数据需要是原始数据类型，您需要先将任何数据序列化，然后再将其保存。由于File对象不是原始数据类型之一，因此您无法将其保存到localstorage。不要忘记，对于可以保存在localstorage和cookies中的最大数据，它们是一个限制（5MB），甚至更少。因此，使用上述选项 NOT PARSIBLE 。

但是，使用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的问题，请告诉我它是否工作正常。

存储/检索html 5 File对象以恢复损坏的文件上载

2 个答案: