Question

我正在使用HTML5 File API来组合多部分表单数据，以便XHR将其提交给Web服务。我有整个工作在FF，它有一个很好的方便的getAsBinary（）方法包含在他们的文件API的实现中。这是一个非常甜蜜的交易。它基本上是：

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处理程序的范围。然而，我重新编写代码，我似乎遇到了其中一个障碍，我正在努力想出一个优雅的方法来处理它。

有什么建议吗？

Answer 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及其语义。

Answer 2

您考虑过xhr.send(FormData)了吗？请在此处查看我的回复：upload to php $_FILE from chrome extension

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

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

2 个答案: