2

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

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

4

2 回答 2

2

存储的数据locastorage需要是原始数据类型，并且您需要在将任何数据保存到此处之前对其进行序列化。由于File对象不是原始数据类型之一，因此您无法将其保存到您的localstorage. 不要忘记，它们是可以保存的最大数据的限制（5MB），localstorage因为cookies它甚至更少。因此，使用上述选项是不可能的。

但是，使用 HTML5 File API 可以是一种选择，或者您可以查看indexedDB. 我没有尝试过它们，您在使用它们时可能会发现它们自身的局限性。

在这里找到两个类似的问题，你可以看看

是否可以在 LocalStorage 中保存 File 对象，然后在用户返回页面时通过 FileReader 重新加载 File？

如何在本地存储中保存和恢复 File 对象

于 2013-11-11T06:18:04.300 回答
0

很容易将文件存储在 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 的问题，如果它不能正常工作，请告诉我。

于 2013-11-11T22:04:53.960 回答