等到上传完成，然后继续脚本答案

【问题标题】：wait till an upload is completed and then continue the script等到上传完成，然后继续脚本
【发布时间】：2015-07-11 00:01:33
【问题描述】：

如何在 for 循环中等待上传完成，然后使用下一个数字继续 for 循环？

我在网上搜索过，只有setTimeout函数等等！
这是我的代码：

for(var f=0;f<4;f++){
   var formdata = new FormData();
   var id = f+1;
   var file = _("filestyle-"+id).files[0];
   formdata.append("file"+id, file);
   var title = _("title"+id).value;
   formdata.append("title"+id, title);
   document.getElementById("uploadname").innerHTML=title+"is uploading<br>";
   var ajax = new XMLHttpRequest();
   ajax.upload.addEventListener("progress", progressHandler, false);
   ajax.addEventListener("load", completeHandler, false);
   ajax.addEventListener("error", errorHandler, false);
   ajax.addEventListener("abort", abortHandler, false);
   ajax.open("POST", "../swupload.php");
   ajax.send(formdata);
}

在 completeHandler 中，一个变量被设置为 1

【问题讨论】：

你能分享你当前的代码吗？
上传文件后需要回调。这可能会帮助你stackoverflow.com/questions/8722601/…

标签： javascript

【解决方案1】：

您可以将要在ajax请求的不同阶段执行的代码设置为：-

readyState 保存 XMLHttpRequest 的状态。从 0 到 4 的变化：

0：请求未初始化
1：服务器连接建立
2：收到请求
3：处理请求
4：请求完成并准备好响应

但是在你的情况下，你想在上传完成后执行代码，它可能是这样实现的：

ajax.onreadystatechange=function()
{
     if (ajax.readyState==4 && ajax.status==200)
     {
          // code to execute after upload
     }
}

【讨论】：

【解决方案2】：

Ajax 是异步的，因此您不能期望其他同步代码等待它。你可以做的是用一个函数替换你的循环，并从你的completeHandler回调中调用它。

post(1);

function post(id) {
   var formdata = new FormData();
   var file = _("filestyle-"+id).files[0];
   formdata.append("file"+id, file);
   var title = _("title"+id).value;
   formdata.append("title"+id, title);
   document.getElementById("uploadname").innerHTML=title+"is uploading<br>";
   var ajax = new XMLHttpRequest();
   ajax.upload.addEventListener("progress", progressHandler, false);
   ajax.addEventListener("load", completeHandler, false);
   ajax.addEventListener("error", errorHandler, false);
   ajax.addEventListener("abort", abortHandler, false);
   ajax.open("POST", "../swupload.php");
   ajax.send(formdata);

   function completeHandler() {
     if (id < 5) post(id + 1);
   }
}

如果completeHandler必须在这个函数之外定义，你可以用闭包来保存id：

ajax.addEventListener("load", completeHandler(id), false);

function completeHandler(id) {
  return function() {
    if (id < 5) post(id + 1);
  }
}

【讨论】：