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

Question

我正在使用 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 处理程序的范围。无论我如何重新调整代码，我似乎都遇到了这些障碍之一，而且我正在努力想出一种优雅的方式来处理它。

有什么建议吗？

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 及其语义不太熟悉。