html5无刷新上传多个文件

2019独角兽企业重金招聘Python工程师标准>>>

遇到的一个问题，在for循环中上传多个文件。每次都去 new XMLHttpRequest.这个上传是没问题，但服务器将文件处理后，将执行后的结果返回来的时候，就出现了异常。

for(i=0;i<files.length;i++)
{
               f=files[i];
               xhr = new XMLHttpRequest();
                xhr.open("post", "@Url.Action("Fix")", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                var fd = new FormData();
                fd.append('file', f);
                xhr.send(fd);
                var picsize =f.size / 1024;
                _html = $("#Lists").html();
                _html += '<br/><strong>' + f.name + '</strong>(' + (f.type || "n/a") + ') - ' + picsize.toFixed(2);
                $("#Lists").html(_html);

                xhr.onreadystatechange = function () {
                     if(xhr.readyState==4){  
                        if(xhr.status==200){  
                        //do something with xhr.responseText;  
                            console.log(xhr.responseText);
                           var data = JSON.parse(xhr.responseText);
                            $("#result").append("<li>" + data.state + ',' + data.file + "</li>");
                        }     
                    }      
                
                };
}

因为循环过快，在获取旧的xmlHttpreQuest响应的时候，会被最新生成的 xmlhttpRequest覆盖掉，虽然服务端返回的结果是正确的，但是上述代码执行后，显示的响应结果会乱掉，比如最后提交的文件，它的状态会被显示多次。

然后就想，可不可以使用setTimeOut，减缓xmlHttpRequest的生成速度，保证每次的响应被浏览器处理后，新的响应再生成。发现这种写法是得不到延时处理的，

for(i=0;i<10;i++)
{
   setTimeOut(alert(i));
}

for循环无视setTimeOut;

查询相关资料后，递归的用法。

var i=0;
function al()
{   
   i++;
   if(i<10) setTimeout(function(){alert("i="+i);al()},2000);
}
al();

可以使问题得到解决。

试了一下，确实可行。

function upload(f) {
                xhr = new XMLHttpRequest();
                xhr.open("post", "@Url.Action("Fix")", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                var fd = new FormData();
                fd.append('file', f);
                xhr.send(fd);
                var picsize =f.size / 1024;
                _html = $("#Lists").html();
                _html += '<br/><strong>' + f.name + '</strong>(' + (f.type || "n/a") + ') - ' + picsize.toFixed(2);
                $("#Lists").html(_html);

                xhr.onreadystatechange = function () {
                     if(xhr.readyState==4){  
                        if(xhr.status==200){  
                        //do something with xhr.responseText;  
                            console.log(xhr.responseText);
                           var data = JSON.parse(xhr.responseText);
                            $("#result").append("<li>" + data.state + ',' + data.file + "</li>");
                        }     
                    }      
                
                };
  
        }
        var length = 0;
        var i = 0;
        function doit(files) {
            if(i<length-1) {
                setTimeout(function() {
                    alert(i);
                    upload(files[i]);
                    doit(files);
                    i++;
                },3000);
            }
        }

好吧，既然要用递归，那就干脆在xmlHttpRequest内部使用递归。

改它的onreadystatechange方法入如下：

         xhr.onreadystatechange = function () {
                     if(xhr.readyState==4){  
                        if(xhr.status==200){  
                        //do something with xhr.responseText;  
                            console.log(xhr.responseText);
                           var data = JSON.parse(xhr.responseText);
                            $("#result").append("<li>" + data.state + ',' + data.file + "</li>");
                            if(++i<files.length)
                            upload(files);
                        }     
                    }      
                
                };

问题也能解决。

转载于:https://my.oschina.net/u/867090/blog/150424