Javascript new FormData和带有（form）.serializeArray（）的HTML表单之间的区别？

Question

似乎 Javascript 中新添加的FormData 类在网上越来越猖獗。主要是在使用 Ajax 定位多个文件上传时。但是如果不是 10+，它与大多数 IE 有一些兼容性问题......

我应该有这样的 HTML：

<form id="normalForm" enctype="multipart/form-data" onSubmmit="gaga()">

<input name="aFile" id="aFile" type="file" multiple/>

<input type="button" value="go">

</form>

和普通的javascript：

function gaga {

var f= document.getElementById("normalForm");
/// do something
}

或带有 New FormData:

的函数

 function nGaga (){

    var f= new FormData()
        f.append("aFile", fileInputElement.files[0])

/// and whatever else to be appended

    }

经过一番阅读，我不知何故了解到，这主要用于在 Javascript 中生成"Key:value" 对象。但是，使用 jQuery，我可以做类似的事情：

var f= $('#normalForm').serializeArray(); 

这会给我"Key:value" 对象。

那么，尽管存在问题，为什么在处理 XMLHTTPrequests 时还要使用new FormData？有什么区别？

Answer 1

例如，您想上传 PDF，但还需要包含一些用户生成的元数据以及 JSON 或 XML（或其他任何东西）。使用FormData，我们不仅可以上传Files 和字符串（HTML 表单已经可以），而且我们还可以上传Blobs，它允许我们上传动态生成的内容并能够指定内容类型：

document.getElementById('dropzone').ondrop = function(e){
  e.preventDefault();
  uploadFiles(e.dataTransfer.files);
};

function uploadFiles(files) {
  var nextId = 123;
  var xml = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
  var json = {
    title: "Hello World!",
    tags: ["pdf", "non-fiction", "literature"],
    token: "ABCeasyAs123"
  };

  files.forEach(function(file, i) {
    var formData = new FormData();
    var xhr = new XMLHttpRequest();
    json.id = nextId + i;

    formData.append("XML",  new Blob([ xml ], { type: "text/xml" });
    formData.append("JSON", new Blob([ JSON.stringify(json) ], { type: "application/json" }));
    formData.append("PDF",  file);

    xhr.open("POST", "/upload");
    xhr.upload.onprogress = function(event) {
      if (event.lengthComputable) {
        var progress = (event.loaded / event.total * 100 | 0);
        console.log('Upload #%d is %d% complete.', i+1, progress);
      }
    }
    xhr.send(formData);
  });
}