Question

似乎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
}

或具有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"对象。

那么，为什么在处理XMLHTTPrequest时应该使用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);
  });
}

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

1 个答案: