Javascript / HTML5文件API将顺序文件读入多部分表单数据 [英] Javascript/HTML5 file API reading sequential files into multipart form data

问题描述

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

I'm using the HTML5 File API to assemble multipart form data for submission by XHR to a web service. I have the whole thing working in FF, which has a nice convenient getAsBinary() method included in their implementation of the file API. This was a pretty sweet deal. It basically went:

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

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

sendData(const);

像魅力一样工作。

To但是，让它在Chrome中工作，我必须制作一个FileReader对象，它的处理方式略有不同。我基本上必须去：

To get it working in Chrome, though, I have to make a FileReader object, which handles a bit differently. I essentially have to go:

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

Which doesn't work, for two main reasons. Firstly, the read happens asynchronously, so by the time it gets to the sendData() function, the file data isn't written to the const variable. Secondly, the const variable is out of scope inside the reader.onload handler. However I re-jig the code, I seem to come across one of these obstacles, and I'm struggling to come up with a graceful way of handling it.

有什么建议吗？

推荐答案

你要做的就是让读者加载处理程序检查它们是否是最后一个运行。当发生这种情况时，那个处理程序就可以了调用sendData（）。

What you're going to have to do is have the reader "load" handlers all check to see whether they're the last one to run. When that happens, then that handler can call "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及其语义。

(I don't fully understand the details of how that accumulated "const" thing will correctly turn into a multipart MIME blob, but I presume that you do :-) Also, and this is probably important: I think you probably need to make a new "FileReader" instance for each file. I coded this that way (actually I just edited it) but that may be incorrect, as I'm not that familiar with the API and its semantics.

这篇关于Javascript / HTML5文件API将顺序文件读入多部分表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！