2

3 つの個別のファイル入力を介して 3 つのファイルのアップロードを行う必要があるフォームがあります。AJAX を使用formDataすると、アップロードする最初のファイルを取得できますが、後続のファイルはアップロードされません。

この問題は、次のコード行に関係していると思います。

var formData = new FormData($("form")[0]);

アップロードするファイルの数を決定するには、何らかの方法で反復する必要があると思いますが、それを実現するロジックについては確信が持てません。これまでの私のコードは次のとおりです。

$("#uploadA, #uploadB, #uploadC").click(function(){
    var formData = new FormData($("form")[0]);
    var progress = $(this).prop("id");

    $.ajax({
        url: url,
        type: "POST",
        xhr: function() {  
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener("progress",function(e) {
                    if(e.lengthComputable){
                        $("#"+progress).attr({value:e.loaded,max:e.total});
                    }
                }, false); 
            }
            return myXhr;
        },

        success: success,
        error: error,
        data: formData,
        contentType: false,
        processData: false
    });

});

完成させるために、サンプル HTML は次のとおりです (3 つのアップロード「ウィジェット」はすべて同じパターンに従います)。

<div class="form-box">
    <label for="A">Episode (MP3)</label>
    <progress max="100" value="0" id="progressA"></progress>
    <input type="file" name="a" value="a" id="a">
    <input type="button" value="Upload" id="uploadA" name="uploadA">
</div>
4

1 に答える 1

0

これを試して：

    var formData = new FormData($(this).closest("form")[0]);

これにより、ドキュメントの最初のフォームではなく、クリックしたアップロード ボタンを含むフォームの formData が取得されます。これは、ファイルごとに個別のフォームがあることを前提としています。

それらがすべて同じフォームにあるが、フォーム全体を送信したくない場合は、FormData オブジェクトを最初から作成するformDataで説明されているように、オブジェクトを手動で作成する必要があります。

var formData = new FormData();
var fileElement = $(this).prev()[0];
formData.append(fileElement.name, fileElement);
于 2013-11-12T10:50:18.947 に答える