XHR多个文件上传进度条

我通过输入类型=“文件”和XHR请求上传文件。上传进行得非常顺利。问题是，我无法用onprogress更新进度条。如果我只上传一个文件，效果很好，但由于不止一个文件，只有一个进度条正在更新，其他的只是不工作，可能来自for循环，但我不明白我可以解决这个问题。如果任何人有一个想法，那简直太好了XHR多个文件上传进度条

下面的代码：！“臭名昭著的循环问题”

$('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');  
    } 
}

来源

2012-10-03 Buzut

的可能重复（http://stackoverflow.com/questions/1451009/javascript-infamous-loop - 问题） –

这是

的问题是在这里：

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臭名昭著的循环问题] Javascript infamous Loop issue?

来源

2012-10-03 16:47:24

它的作品，非常感谢你！我对JS很新，我从来没有听说过这个“臭名昭着的循环问题”。现在经过一个快速的研究，我已经明白了这个问题： “JavaScript的作用域是功能级别，而不是块级别，创建闭包只是意味着封闭作用域被添加到封装函数的词法环境中“。这就是为什么一个匿名函数摆脱了这个臭名昭着的循环问题。再次感谢您，您刚从头痛中释放了我！ – Buzut

@ user1717735，没问题，很高兴帮助:) –

XHR多个文件上传进度条

回答

相关问题