Question

我正在尝试HTML5 Multiupload的一些东西。所以我有一个表单，可以加载多个文件。它们通过FileApi读取，并向用户显示fileinformation。

伪代码：

<div id="info">
   <div id="file_1">...</div>
   <div id="file_2">...</div>
   ...
</div>

因此，我使用$.each()处理所有文件，并增加var fileId。对于上传本身，我将EventListener添加到我的XMLHTTPRequest

xhr.addEventListener("load", uploadComplete, false);

但是在上传完成后我不想删除filecontainer #file_X。所以我可以这样做：

xhr.addEventListener("load", function(evt) {
   if(evt.target.readyState == 2 && evt.target.status == 200)
   {
       $('#file_' + fileId).slideUp();
   }
}

我的问题是，我可以在函数中分离这段代码吗？我将事件和参数发送到这样的独立函数是不行的：

xhr.addEventListener("load", uploadComplete(evt, fileId), false);

这样做有更聪明的方法：

xhr.addEventListener("load", function(evt) {
   uploadComplete(evt, fileId);
});

Answer 1

修改：抱歉，我误解了你的问题。我已经更新了我的答案。

脚本不起作用，因为在$.each()循环之后，var fileId将包含在循环的最后一次迭代中给出的值。因此，如果您有10个文件，fileId将为"file_10"用于脚本的其余部分（这不是您想要的）。

您希望将事件处理程序传递给当前值，而不是引用var fileId。幸运的是，你可以通过创建一个闭包来做到这一点：

$('#info').each(function(){
    /* Do your thing, start the XHR and whatnot */

    (function(currentFileId) {
        xhr.addEventListener("load", function(evt) {
            uploadComplete(evt, currentFileId);
        });
    }) (fileId);
});

您可以在任何优秀的JavaScript书籍或互联网上阅读有关闭包的更多信息，例如： here (MDN)

我希望这会有所帮助。

在分离函数中使用事件加上自己的变量

1 个答案: