0

複数の添付ファイルを追加する必要があるフォームがあります。ユーザーが必要な数のファイルを選択してキャンセルできるように、この機能は動的である必要があります。

フロントエンドでファイル入力要素を作成し、その「変更時」に、別の ID と同じ名前の別のファイル入力要素を追加しています。添付ファイルを配列として送信する必要があるため、使用している名前は「attachment[]」です。

送信ボタンは、jquery を使用してパラメーターを取得し、フォームデータを作成する JavaScript 関数を呼び出します。関数スニペットは

function send()
{
var form = document.getElementById("composeForm");

var formElements = form.elements;
var formdata;
for (x in formElements)
{
  //each element that has type='file' and value is 0 is what we want to delete later
  if(formElements[x].type=='file'&&formElements[x].value.length!=0)
  { 
        console.log(document.getElementById(formElements[x].id).files[0]);
    formdata = new FormData();
    var file = document.getElementById(formElements[x].id).files[0];
    formdata.append("attachment[]", file);
  }
}

if (!formdata)
{
    formdata = new FormData();
}

formdata.append("subject", document.getElementById("subjectInput").value);
if (formdata) {
    $.ajax({
        url: "../ws/attach.php",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function (res) {
            alert(res);
        }
    });
}

return false;
}

しかし、問題は、パラメーターに最後に追加されたファイルを常に送信することです。上記には、すべてのファイルを表示するための console.log が含まれています。

File {webkitRelativePath: "", lastModifiedDate: Thu Dec 06 2012 03:01:55 GMT+0530 (India Standard Time), name: "backup.txt", type: "text/plain", size: 10584}
File {webkitRelativePath: "", lastModifiedDate: Wed Dec 19 2012 16:24:36 GMT+0530 (India Standard Time), name: "acknowledgement.pdf", type: "application/pdf", size: 163435}

しかし、クロムの検査要素は、送信された唯一のパラメーターが

    ------WebKitFormBoundaryVYMwpCkBb8zK6tg0
Content-Disposition: form-data; name="attachment[]"; filename="acknowledgement.pdf"
Content-Type: application/pdf

不足しているものはありますか？

4

1 に答える 1

0

まあ、それは私が犯したばかげた間違いです。エラーは、毎回 FormData を初期化したことが原因でした:(

formdata = new FormData();

とにかく、時間を割いてくれた彼らに感謝します。

于 2012-12-26T10:30:34.903 に答える