html5无刷新上传,html5无刷新上传多个文件

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

for(i=0;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 += '' + f.name + '(' + (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("

" + data.state + ',' + data.file + "");

}

}

};

}

因为循环过快，在获取旧的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 += '' + f.name + '(' + (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("

" + data.state + ',' + data.file + "");

}

}

};

}

var length = 0;

var i = 0;

function doit(files) {

if(i

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("

" + data.state + ',' + data.file + "");

if(++i

upload(files);

}

}

};

问题也能解决。