多个进度状态 + Ajax 表单插件答案

【问题标题】：Multiple progress status + Ajax form plugin多个进度状态 + Ajax 表单插件
【发布时间】：2013-10-23 12:04:28
【问题描述】：

我正在使用 Ajax 表单插件，并且我有一个用于发送多个请求的循环。我正在尝试获取每个文件的单独进度。似乎可行，但文件的进度只显示在代码的最后一个<p>。

for (var i = 0; i < inp.files.length; i++) {
$('form').ajaxSubmit({
beforeSend: function() {
    $('body').append('<p class="c'+ i +'"></p>'); 
    var classe = '.c' + i;
},
uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';

    $(classe).append(percentVal);
    //console.log(percentVal, position, total);
}
});
}

2 个文件的 HTML 输出：

<p class="c0"/>
<p class="c1">
79%
100%
81%
100%
</p>

有两个100% 好像获取了两个文件的进度。但是，它只是在最后一个元素中打印。谢谢

【问题讨论】：

标签： javascript jquery ajax progress

【解决方案1】：

因为在 c0 的响应进来之前 classe 更改为 c1... 将其放入匿名函数中。

for (var i = 0; i < inp.files.length; i++) {
    (function () {
        var classe = '.c' + i;
        $('form').ajaxSubmit({
            beforeSend: function () {
                $('body').append('<p class="c' + i + '"></p>');
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';

                $(classe).append(percentVal);
                //console.log(percentVal, position, total);
            }
        });
    }());
}

（未测试）

或者你必须将 Ajax 请求更改为同步

【讨论】：