Question

我有一个表单，我必须添加多个附件。此功能应该是动态的，因为用户可以根据需要选择任意数量的文件并取消其中任何一个。

在前端，我创建了一个文件输入元素，然后在＆＃34; onchange＆＃34;上添加另一个具有不同id和同名的文件输入元素。我使用的名称是＆＃34; attachment []＆＃34;因为我需要将附件作为数组发送。

提交按钮调用javascript函数，其中使用jquery获取参数并创建formdata。功能代码段为

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}

但是chrome检查元素显示发送的唯一参数是

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

有什么遗失的吗？

Answer 1

这是我犯的一个愚蠢的错误。该错误是由于每次初始化FormData :(

formdata = new FormData();

非常感谢那些花时间在上面的人。

表单的多个附件

1 个答案: