提问人：provance 提问时间：7/8/2023 最后编辑：marc_sprovance 更新时间：7/23/2023 访问量：33
如何分别为每个上传的图像设置从 0 到 100% 的进度条
How to set progress bar from 0 to 100% for each uploaded image separately
问：
我想上传多个图像，但在单独的 XMLHttpRequest 中。
请求应按顺序（一个接一个）执行，而不是同时执行。
那是因为我希望每个上传图像的进度条从 0 到 100%。
使用此代码似乎请求是同时执行的，因为：
- 进度条闪烁 - 不断前后移动
- All in Console 同时出现，即在整个过程结束时出现
finito
如果我写而不是：ajax.open("POST", "a_pro_up.php, false")ajax.open("POST", "a_pro_up.php");
finitos在控制台中按顺序显示- 但是进度条根本不起作用
如何分别获得每个上传图像的流畅上升进度条？
<input type="file" class='inpfi' id='inpimg' multiple accept="image/jpeg">
<progress class='pbar' id='pbar' value='0' max='100'> 0% </progress>
inpimg.on('change', function(){
var files = inpimg[0].files;
for(var i = 0; i < files.length; i++){
var file = files[i];
var fd = new FormData();
fd.append('id', urw);
fd.append('upimg', file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", up_progress, false);
ajax.addEventListener("load", up_img_finito, false);
ajax.open("POST", "a_pro_up.php");
ajax.send(fd);
}
});
function up_progress(e){
let percent = (e.loaded / e.total) * 100;
pbar.val(Math.round(percent));
}
function up_img_finito(){
console.log('finito');
}
答：
1赞
mplungjan
7/8/2023
#1
我建议永远不要循环 ajax。
这是一个根据需要按顺序运行的版本
let files, cnt = 0,
max = 0;
const up_img_finito = () => {
console.log('finito', cnt);
cnt++
upload();
}
const up_progress => (e) {
let percent = (e.loaded / e.total) * 100;
pbar.val(Math.round(percent));
};
const upload = () => {
if (cnt >= max) {
up_img_finito()
return;
}
let file = files[i];
let fd = new FormData();
fd.append('id', urw);
fd.append('upimg', file);
let ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", up_progress, false);
ajax.addEventListener("load", up_img_finito, false);
ajax.open("POST", "a_pro_up.php");
ajax.send(fd);
};
document.getElementById('inpimg').addEventListener('change', () => {
files = inpimg[0].files;
max = files.length;
upload()
});
评论