您好,匿名用户

php+jquery for循环发送ajax请求监听文件上传进度不正确

0 投票

为了实现一个点击按钮实现多文件上传并且为每个文件单独生成进度条

<form id="form" method="post">
    <input type="file" class="btn btn-primary" name="file" id="file" multiple>
</form>
<button id="button">upload</button>

点击事件

$('#button').on('click',function () {
            $("#file").trigger("click");    //触发input点击事件
            $('#file').on('change',function () {    //监听input改变
                var length = $('#file')[0].files.length;    //获取选择文件的数量
                for(var index=0 ;index<length;index++){    //循环发送ajax
                    var file = document.getElementById('file').files[index];    //根据循环变量来动态选择用户多选的文件
                    var name = file.name;    //文件名
                    var size = file.size;    //文件大小
                    var formData = new FormData();
                    /*
                        动态生成一个表格行,有一个是显示bootstrap的进度条
                    */
                    
                    formData.append('file',file);    //发送的数据
                    $.ajax({
                        type: 'post',
                        url: "{:url('index/home/uploader')}",
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: false,
                        xhr: function () {  //获取上传进度
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', function (e) {
                                    console.log(e);
                                    var loaded = e.loaded;//已上传
                                    console.log(loaded);
                                    var total = e.total;//总大小
                                    console.log(total);
                                    var percent = Math.floor(100 * loaded / total);//进度
                                    console.log(percent);
                                    console.log(index);
                                    //根据上面动态生成的进度条id 和 进度数据 修改样式达到显示进度作用
                                    setProgress('upload_'+index,percent);
                                });
                                return myXhr;
                            }
                        },

自己搜了下,for循环并不会等ajax执行完在执行下一个循环,只要请求发送了,for循环就继续执行,并且for循环速度比ajax快,所以

setProgress('upload_'+index,percent);

中获取的index循环变量总是获取的是最后一个,导致进度条显示不正确。

有什么办法能解决吗?
具体就是想让每个ajax都获取到的是不同的id值

亦或者有什么其他的办法能上传多个文件的同时给每个文件都单独显示进度条呢

求老哥们支点招

用户头像 提问 5月6日 @ Galio 中士 (1,364 威望)
分享到:

1个回答

0 投票
 
最佳答案

ajax部分封装成一个函数

function fileUpload(i){
    //…………
}

for循环内调用这个函数

for(var index=0 ;index<length;index++){
    //…………
    fileUpload(index);
}
用户头像 回复 5月6日 @ Galio 中士 (1,364 威望)
选中 5月3日 @Galio
提一个问题:

相关问题

0 投票
1 回复 72 阅读
0 投票
0 回复 132 阅读
0 投票
1 回复 125 阅读
用户头像 提问 2017年 4月10日 @ Dionysus 下士 (724 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

IT技术交流群 - 随意问
欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...