3

input type="file"とXHRリクエストを介してファイルをアップロードしています。アップロードは非常にうまくいきます。問題は、進行状況バーを進行中で更新できないことです。アップロードするファイルが1つだけの場合はうまく機能しますが、複数のファイルがあるため、更新されるプログレスバーは1つだけで、他のファイルは機能しません。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');    
    }
}
4

1 に答える 1

8

これが「悪名高いループの問題」です。

問題はここにあります：

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の悪名高いループの問題？

于 2012-10-03T16:47:24.220 に答える