ajax上传文件显示进度,ajax多文件上传显示进度怎么正确显示

先是根据上传的文件数创建了显示进度的div

var upsongindex = 0;

var fileControl = document.getElementById("songListInputs");

var files = fileControl.files;

for (var i = 0; i < files.length; i++) {

var curFile = files[i];

var fname = curFile['name'].substring(curFile['name'].lastIndexOf("\\") + 1);

//显示上传进度

var list = document.getElementById(e);

var node = "

" +

"

" + (upsongindex + 1) + "
" +

"

" + displayName + "
" +

"

" + "上传中" + "
" +

"

" + 0 + "%
" +

"

" +

"edit.png" +

"x.png" +

"

"

"

";

list.innerHTML += node;

uploadFiles(curFile);

upsongindex++;

然后在这个函数里更新进度

function uploadFiles(curFile) {

var progress = document.getElementById("upsi3_" + upsongindex);

var loaded = document.getElementById("upsi2_" + upsongindex);

var xhttp = new XMLHttpRequest();

var oFormData = new FormData();

oFormData.append('songList', curFile);

xhttp.open('POST', 'uploadSong.ashx', true);

xhttp.upload.onprogress = function (ev) {

console.log(progress);

var iScale = ev.loaded / ev.total;

var percent = 100 * iScale;

这里

progress.innerHTML = parseInt(percent) + "%";

}

//上传完成

xhttp.onload = function () {

progress.innerHTML = "";

loaded.innerHTML = "已完成";

}

xhttp.send(oFormData);

}

不过在触发 xhttp.upload.onprogress事件的时候upsongindex的值已经是2了(假设上传3个文件)导致所有文件的上传进度都显示在最后一个div了,

请问怎么在xhttp.upload.onprogress事件处理函数里获得对应的upsongindex值,而不是最终的upsongindex值,谢谢

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值