小编And*_*zek的帖子

我通过输入类型="文件"和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 …