Question

在扫描<form>中的所有元素时，我无法获得添加文件（或多个文件）的正确语法。有问题的行是data.append("PhotosToUpload", TheFile);。我尝试了许多不同的方法但没有成功。

最小代码示例如下。

＆＃13;

function SendData() {
  var inputs = document.getElementById("MyForm").elements;

  var xhr = new XMLHttpRequest();
  xhr.open('post', 'TheHandler.php', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("TheResponse").innerHTML = xhr.responseText;
    }
  }

  var data = new FormData;
  for (i = 0; i < inputs.length; i++) {
    if (inputs[i].type === 'file') {
      if (inputs[i].files.length != 0) {
        for (a = 0; a < inputs[i].files.length; a++) {
          var TheFile = inputs[i].files[a];

          ///////// HERE MY PROBLEM ////////////

          data.append("PhotosToUpload", TheFile);
          //For multiple files also I tried:
          //data.append("PhotosToUpload[]", TheFile);
        }
      }
    } else {
      var TheName = inputs[i].name;
      var TheValue = inputs[i].value;
      data.append(TheName, TheValue);
    }
  }
  xhr.send(data);
  return false;
}

＆＃13;

<form id="MyForm" onsubmit="event.preventDefault(); SendData();">
  <div>Order<input type="text" name="Order" value=""></div>
  <div>SubOrder<input type="text" name="SubOrder" value=""></div>
  <div>Select photo (.jpg) to Upload: <input type="file" name="PhotoToUpload" id="PhotoToUpload" multiple size="3"></div>
  <input type="submit" name="SendD" id="SendD" value="Send data" >
</form>

<div id="TheResponse"></div>

＆＃13;

Answer 1

你过度复杂的事情。你根本不需要考虑各个元素。只需将FormData对象作为表单，然后让它在其中查找数据。

var form = document.getElementById("MyForm");
var data = new FormData(form);
xhr.send(data);

请注意，当您为同一字段名称设置多个值时，PHP需要特殊的命名约定。

name="PhotoToUpload"必须为name="PhotoToUpload[]"

将表单（包括文件）中的所有数据附加到FormData

1 个答案: