XHR多文件上传并带有进度条

Question

我正在通过和XHR请求上传文件。上传进度很好。问题在于，我无法使用onprogress更新我的进度条。如果我只上传一个文件，则可以正常工作，但由于有多个文件，只有一个进度条被更新，其他进度条根本就不起作用。这可能来自for循环，但我不知道如何解决。如果有人有想法，那就太好了！

这是代码:

$('input').change(function() {

var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'];   
var filesLen = this.files.length;
var fileInput = document.querySelector('#file');

for (i = 0; i < filesLen; i++)
{
    var vidType = this.files[i].name.split('.');

    if (allowedTypes.indexOf(vidType[vidType.length -1].toLowerCase()) != -1)
    {
        var progress = 'progress' + i;

        $('input').before('<p>' + this.files[i].name + ' <progress id="' + progress + '"></progress></p>');

        var xhr = new XMLHttpRequest();

        xhr.open('POST', '/upload/');

        xhr.upload.onprogress = function(e) 
        {
            $('#' + progress).attr('value', e.loaded);
        $('#' + progress).attr('max', e.total);
        };

        xhr.onload = function()
        {
            console.log('upload complete');
        };

        var form = new FormData();
        form.append('title', this.files[i].name);
        form.append('pict', fileInput.files[i]);

        xhr.send(form);

    }

    else
    {
        alert('Your file "' + this.files[i].name + '" \'s format isn\'t supported');    
    }
}

- Buzut

---

可能是JavaScript臭名昭著的循环问题？的重复。 - Dagg Nabbit

Answer 1

这是“臭名昭著的循环问题”。

问题在这里：

xhr.upload.onprogress = function(e) 
{
    $('#' + progress).attr('value', e.loaded);
    $('#' + progress).attr('max', e.total);
};

当这个函数运行时，progress将是循环退出时的值，而不是在定义函数时循环中该变量的值。请尝试用以下代码替换原来的代码:

(function(progress) { 
    xhr.upload.onprogress = function(e) 
    {
        $('#' + progress).attr('value', e.loaded);
        $('#' + progress).attr('max', e.total);
    };
}(progress));

更多信息：JavaScript 中臭名昭著的 Loop 问题？

- Dagg Nabbit

---

太好了，非常感谢！我对JS还很陌生，之前从未听说过这个“臭名昭著的循环问题”。经过一番快速研究，我已经很好地理解了这个问题：“JavaScript的作用域是基于函数的，而不是基于块级的，创建闭包只是意味着封闭的作用域被添加到封闭函数的词法环境中。”这就是为什么匿名函数能够摆脱这个臭名昭著的循环问题。再次感谢你，你刚刚解决了我的一个大头疼问题！ - Buzut