0

新しい複数属性を使用するアップロード フォームがあり、よりユーザー フレンドリーにするために ajax アップロード フォームを作成しました。私の問題は、アップロードされて div に追加されるこれらすべてのファイルのパーセンテージを更新しようとすることです。1 つのパーセンテージが更新されるのではなく、すべてのファイルが最後のファイルから更新されます。ここにいくつかのコードがあります。

$('#File').change(function(event) {
        for(I = 0; I < this.files.length; I++)
        {
            var Name = this.files[I].name;
            var Size = this.files[I].size;
            var Type = this.files[I].type;

            $('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>');
            var Data = new FormData();
            Data.append('File[]', this.files[I]);
            var Request = new XMLHttpRequest();
            Request.upload.addEventListener('progress', function(event){
                if(event.lengthComputable)
                {
                    var Percent = event.loaded / event.total;
                    var Progress = $('#UploadContent').find('.UploadPercent');
                    $(Progress).text(Math.round(Percent * 100) + '%');
                }
            });
            Request.upload.addEventListener('load', function(event) {
        });

            Request.open('POST', '/Home/Upload/Upload.php');
            Request.setRequestHeader('Chache-Control', 'no-cache');
            Request.send(Data);
            $('#UploadModal').fadeIn('fast');
        }
    });

進行状況リスナーでわかるように、私の

var progress = $('#UploadContent').find('.UploadPercent');

正しく更新されるはずのファイルを選択する方法を教えてください。誰かがパーセンテージを変更する完全に異なる方法を見つけることができれば、それも素晴らしいことです! - ありがとう！

4

1 に答える 1

1

先頭に追加するときは、新しい特定の要素を要素に追加しclassます (はい、 を使用できますがid、私は に固執しますclass) 。.UploadPercent

$('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent UploadTarget' + I + '" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>');
// LOOK HERE----------------------------------------------------------------------------------------------------------------------^ HERE

ターゲティングするときは、これを使用します。

var progress = $('#UploadContent').find('.UploadTarget' + I);

Iループのどこにいるかに基づいての値を正確にする必要があるため、クロージャも使用する必要があります。したがって、コードは次のようになります。

$('#File').change(function(event) {
    for(I = 0; I < this.files.length; I++) {
        (function (I) {
            // Your current code inside the for loop
        })(I);
    }
});

上記の例は間違いなくオプションですが、新しく挿入された要素への参照を保存するだけで、新しいclassandを処理する必要がなくなりI、後で使用する必要がなくなります。

使用する最終的なコードは次のとおりです。

http://jsfiddle.net/MeL7L/2/

$("#File").on("change", function (event) {
    for (var i = 0; i < this.files.length; i++) {
        (function (curFile, i) {
            var Name = curFile.files[i].name;
            var Size = curFile.files[i].size;
            var Type = curFile.files[i].type;

            var newEl = "";
            newEl += '<div class="UploadLabel" style="width:60%;">' + Name + '</div>';
            newEl += '<div class="UploadLabel UploadPercent" style="width:10%;">0%</div>';
            newEl += '<div class="UploadLabel" style="width:15%;">N/A</div>';
            newEl += '<div class="UploadLabel" style="width:15%;">' + Type + '</div>';
            newEl = $(newEl);
            $("#UploadContent").prepend(newEl);
            var Data = new FormData();
            Data.append("File[]", curFile.files[i]);
            var Request = new XMLHttpRequest();
            Request.upload.addEventListener("progress", function (event){
                if (event.lengthComputable) {
                    var Percent = event.loaded / event.total;
                    var Progress = newEl.find(".UploadPercent");
                    Progress.text(Math.round(Percent * 100) + "%");
                }
            });
            Request.upload.addEventListener("load", function(event) {});

            Request.open("POST", "/Home/Upload/Upload.php");
            Request.setRequestHeader("Cache-Control", "no-cache");
            Request.send(Data);
            $("#UploadModal").fadeIn("fast");
        })(this, i);
    }
});
于 2013-04-06T03:01:01.737 に答える