Javascript/HTML5 文件 API 将顺序文件读入多部分表单数据答案

【问题标题】：Javascript/HTML5 file API reading sequential files into multipart form dataJavascript/HTML5 文件 API 将顺序文件读入多部分表单数据
【发布时间】：2011-07-18 18:40:18
【问题描述】：

我正在使用 HTML5 文件 API 来组装多部分表单数据，以通过 XHR 提交到 Web 服务。我在 FF 中完成了所有工作，它在文件 API 的实现中包含了一个非常方便的 getAsBinary() 方法。这是一笔非常甜蜜的交易。它基本上去了：

var const;  // constructor
const += headers;
const += field_data;

for(var i = 0; i < files.length; i++)
{
   const += files[i].getAsBinary();
}

sendData(const);

工作就像一个魅力。

不过，要让它在 Chrome 中工作，我必须创建一个 FileReader 对象，它的处理方式略有不同。我基本上得走了：

var const;  // constructor
const += headers;
const += field_data;

var reader = new FileReader();

for(var i = 0; i < files.length; i++)
{
    reader.onload = (function(file)
    {
       const += file.target.result;   // const is not in scope in this anonymous function!
    }
    reader.readAsBinaryString(files[i]);
}

sendData(const);

这不起作用，主要有两个原因。首先，读取是异步发生的，所以当它到达 sendData() 函数时，文件数据并没有写入 const 变量。其次， const 变量超出了 reader.onload 处理程序的范围。然而，我重新编写代码，我似乎遇到了这些障碍之一，我正在努力想出一种优雅的方式来处理它。

有什么建议吗？

【问题讨论】：

其实“const”肯定在范围内，但范围不是问题。
顺便说一句，这个问题做得很好。欢迎使用 Stackoverflow！
谢谢。是时候让我摆脱潜伏了。

标签： javascript html multipartform-data fileapi

【解决方案1】：

您要做的是让阅读器“加载”处理程序都检查它们是否是最后一个运行的处理程序。发生这种情况时，该处理程序可以调用“sendData()”。

var const;  // constructor
const += headers;
const += field_data;

var reader;
var finished = 0;
for(var i = 0; i < files.length; i++)
{
    reader = new FileReader();
    reader.onload = function(file)
    {
       const += file.target.result;
       if (++finished === files.length)
         sendData(const);
    };
    reader.readAsBinaryString(files[i]);
}

（我不完全了解累积的“const”事物如何正确变成多部分 MIME blob 的详细信息，但我认为您会这样做 :-) 另外，这可能很重要：我认为您可能需要为每个文件创建一个新的“FileReader”实例。我是这样编码的（实际上我只是编辑了它）但这可能是不正确的，因为我对 API 及其语义不是很熟悉。

【讨论】：

我抽象了 const 的东西。否则，边界和标题将是混乱的混乱。那一点已经奏效了。
那好吧。对此的替代方法是在 jQuery 中构建类似新的“延迟”功能。这是一个简单的想法，基于维护“待办事项”列表的小对象，以及在通知状态更改时调用其他事情的 API。这将是一种封装“完成”计数器维护的方法。
我肯定会调查一下。谢谢。

【解决方案2】：

你考虑过xhr.send(FormData)吗？在这里查看我的回复：upload to php $_FILE from chrome extension

您可以将文件附加到 FormData 对象并通过 xhr 发送。浏览器构造您的多部分请求。我相信这在 FF4 中可用并且已经在 Chrome 中一段时间。

【讨论】：