使用 FormData 和带有 Javascript 的单个 XMLHttpRequest 上传多个表单

Question

假设我有两种结构相同但末尾值不同的形式。我想使用 FormData 和单个 XMLHttpRequest 请求提交它们。我试图添加另一个 FormData 对象或一个额外的数组，但到目前为止结果是一个空响应。

HTML

<!-- first form -->
<form enctype="multipart/form-data" method="post" action="/" >
  <input type="hidden" name="entity" value="1" />
  <input type="text" name="name" value="" />
  <input type="text" name="email" value="" />
  <input type="password" name="password" value="" />
  <input type="file" name="file[]" multiple />
</form>

<!-- second form -->
<form enctype="multipart/form-data" method="post" action="/" >
  <input type="hidden" name="entity" value="1" />
  <input type="text" name="name" value="" />
  <input type="text" name="email" value="" />
  <input type="password" name="password" value="" />
  <input type="file" name="file[]" multiple />
</form>

JavaScript

var a = new FormData(); // using additional FormData object
var b = [];             // using an array
for(var i = 0; i < document.forms.length; i++){
  var form = document.forms[i];
  var data = new FormData(form);
  if(typeof form['file'] !== 'undefined'){
    for(var j=0; j<form['file'].files.length; j++){
      data.append('file[]', form['file'].files[j]);
    }
  }
  a.append(i, JSON.stringify(data)); // or a.append(i, data);
  b[i] = JSON.stringify(data);       // or b[i] = data;

}
var xhr = new XMLHttpRequest();
var url = "ajax.php";
xhr.open("POST", url, true);
xhr.onreadystatechange = function (){
  if(xhr.readyState == 4 && xhr.status == 200){
    console.log(xhr.responseText);
  }
}
xhr.send(a); // or xhr.send(b);

PHP

echo json_encode(array_merge($_GET, $_POST, $_FILES));
// or
print_r(array_merge($_GET, $_POST, $_FILES));

Answer 1

你那里有几个问题。问题之一是您输入的名称是 file[] 而不是 file，因此您需要使用该名称。另一个问题是，如果你想 post 文件到服务器，你不能使用 JSON.stringify。

检查我对您的代码所做的更改，它将满足您的要求：

var a = new FormData(); // using additional FormData object
var b = [];             // using an array
for(var i = 0; i < document.forms.length; i++){
    var form = document.forms[i];
    var data = new FormData(form);
    var formValues = data.entries()
    while (!(ent = formValues.next()).done) {

        // Note the change here 
        a.append(`${ent.value[0]}[]`, ent.value[1])
    }
}
// here a will include all the data from all of your forms.

<!-- first form -->
<form enctype="multipart/form-data" method="post" action="/" >
  <input type="hidden" name="entity" value="1" />
  <input type="text" name="name" value="" />
  <input type="text" name="email" value="" />
  <input type="password" name="password" value="" />
  <input type="file" name="file[]" multiple />
</form>

<!-- second form -->
<form enctype="multipart/form-data" method="post" action="/" >
  <input type="hidden" name="entity" value="1" />
  <input type="text" name="name" value="" />
  <input type="text" name="email" value="" />
  <input type="password" name="password" value="" />
  <input type="file" name="file[]" multiple />
</form>

使用 FormData 和带有 Javascript 的单个 XMLHttpRequest 上传多个表单

Uploading multiple forms using FormData and a single XMLHttpRequest with Javascript

javascript

ajax

xmlhttprequest

form-data