将文件列表保存到 $.cookies

Question

我有一个这样的文件列表：

FileList {0: File, 1: File, 2: File, File…}

我需要在页面刷新后记住这些文件。如何将它们保存到 cookie 中？ （或者有更好的方法吗？）现在我正在这样做$.cookie("result", files); files = $.cookie("result");，但这让我无法解析 [object FileList]。将files 转换为 JSON 也不起作用。

任何想法如何保存 FileList 以便在页面刷新后循环它？

编辑：也许我应该注意我从用户输入中获取 FileList，例如“选择文件”。

分配文件：

HTML 部分：

<input type="file" id="files" name="file" multiple />

JS部分：

$('#files').on('change', readFiles);
function readFiles(event) {
     var files = event.target.files; //has FileList {0: File, 1: File, 2: File, File…}
     $.cookie.json = true; //converts FileList to json (is correct).
     $.cookie("result", files); //cookie registering also works (atleas with strings) 
     files = $.cookie("result"); //get undefined as a result
     for (var i = 0, f; f = files[i]; i++) {
       var reader = new FileReader();
       reader.readAsText(f, 'utf-8');
     }
}

Answer 1

在您的原始代码中，代替：

reader.readAsText(f, 'utf-8');

你想要的：

reader.readAsText(f.name, 'utf-8');

如果您还没有打开它，您可能需要 JSON 选项，该选项在存储时将对象自动转换为 JSON 字符串，然后在检索时返回对象。它看起来像：

$.cookie.json=true;

这是文档：https://github.com/carhartl/jquery-cookie/tree/v1.4.1#json

注意：虽然根据spec，每个 cookie 的最大大小是无限的，但实际上它因浏览器而异。如果您的列表中有 150 个文件，您可能会达到限制，而 $.cookie 对象正在拒绝该值。有关最大尺寸的更多信息，请参见此处：What is the maximum size of a web browser's cookie's key?

为避免此限制，请划分您的列表，或使用webstorage。

更好的解决方案是通过 GET 或 POST 将文件列表存储在服务器上，并让服务器提供允许检索的会话 cookie。如果使用 PHP，请参阅PHP Sessions。