Javascript new FormData和HTML表单与(form).serializeArray()之间的区别？

Question

似乎FormDataJavascript中新添加的类正在猖獗.主要是在使用Ajax定位多个文件上传时.但有些如何与大多数IE有一些兼容性问题,如果不是10 + ...

我应该有像这样的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

    }

经过一些阅读后,我以某种方式了解到,这主要用于"Key:value"在Javascript中生成对象.但是,使用jQuery,我可以做类似的事情:

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

这将有点给我这个"Key:value"对象.

那么,为什么要new FormData在处理XMLHTTP请求的同时使用它呢？有什么区别？

Answer 1

比如说你想要上传一个PDF,但也需要将一些用户生成的元数据与它一起包含为JSON或XML(或任何真正的东西).使用FormData,我们不仅可以上传文件和字符串(已经可以使用HTML表单),而且我们还可以上传Blob,这些Blob允许我们上传动态生成的内容并能够指定内容类型:

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);
  });
}