javascript - 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
}

或带有新 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);
  });
}