Javascript中new FormData和HTML表单(form).serializeArray()之间的区别是什么？

Question

Javascript中new FormData和HTML表单(form).serializeArray()之间的区别是什么？

javascriptjqueryhtmlxmlhttprequestmultipartform-data

3

似乎Javascript中新增的FormData类正在网上广泛使用，尤其是在使用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
}

使用新的FormData函数或a函数：

 function nGaga (){

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

/// and whatever else to be appended

    }

经过一些阅读，我了解到这主要用于在JavaScript中生成“键：值”对象。然而，使用jQuery，我可以做类似以下的事情：

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

这将会给我一个 "键:值" 对象。

那么，为什么在处理XMLHTTP请求时应该使用 new FormData 呢？有什么区别？

- ErickBest

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- idbehold · Accepted Answer

例如，假设您想上传一个PDF文件，但还需要将一些用户生成的元数据作为JSON或XML（或任何其他格式）与其一起包含。使用FormData，我们不仅可以上传文件和字符串（这已经可以通过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);
  });
}