H5 FormData对象的使用——进行Ajax请求并上传文件

var oMyForm = new FormData();    //创建一个空的FormData对象
oMyForm.append("userName","Coco");       //append()方法添加字段
oMyForm.append("accountNum",123456);   //数字123456立即被转换成字符串“123456”
oMyForm.append("userFile",fileInputElement.files[0]);
var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"});  //Blob对象包含的文件内容是oFileBody
oMyForm.append("webmasterfile",oBlob);
var oReq = newXMLHttpRequest();
oReq.open("POST","   .php");
oPeq.send(oMyForm);   //使用XMLHttpRequest的send()把数据发送出去

var new_FormData = new FormData( someFormElement );           

var FormElement = document.getElementById("myFormElement");
var oReq = newXMLHttpRequest();
oReq.open("POST","     .php");
oReq.send(new FormData(FormData));

var FormElement = document.getElementById("myFormElement");
var formData = newFormData(FormElement);
formData.append("serialnumber",serialNumber++);
var oReq = newXMLHttpRequest();
oReq.send(formData);

var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();

<form enctype="multipare/form-data"method="post"name="fileinfo">
      <label>your email address:</label>
      <input type="email"autocomplete="on"autofocus name="userid"placeholder="email"required size="32"maxlength="64"/><br>
      <label>custom file label:</label>
      <input type="text"name="filelabel"size="12"maxlength="32"/><br>
      <label>File to stash:</label>
      <input type="file"name="file"required>
</form>
<div id="Output"></div>
<a href="javascript:sendForm()">stash the file !</a>

functionsendForm(){
      var oOutput = document.getElementById("Output");
      var oData = new FormData(document.forms.nameItem("fileInfo"));
      oData.append("customField","This is some extra data");
      var oReq = newXMLHttpRequest();
      oReq.open("POST","     .php",true);
      oReq.onload = function(oEvent){
            if(oReq.status == 200){
                   oOutput.innerHTML = "Uploaded!";
            }else{
                   oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!"
            }
      };
      oReq.send(oData);
}

var data = newFormData();
var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"});
data.append("myfile",oBlob);

var fd =new FormData(document.getElementById("fileinfo"));
fd.append("customField","This is some extra data");
$.ajax({
     url:"    .php",
     type:"POST",
     data:fd,
     processData:false,   //告诉jquery不要处理发送的数据
     contentType:false    //告诉jquery不要设置content-Type请求头
});

<form id="uploadForm">
      指定文件名:<input type="text"name="filename"value="">
      上传文件:<input type="file"name="file">
       <input type="button"value="上传"onclick="doUpload()">
</form>

functiondoUpload(){
    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
          url:"   .php",
          type:"POST",
          data:formData,
          async:false,
          cache:false,
          contentType:false,
          processData:false,
          success:function(returndata){
                 alert(returndata);
          },
          error:function(returndata){
                 alert("error:"+returndata);
          }
    });
}

<form name="form"id="formData">
       name:<input type="text"name="name">
       gender:<input type="radio"name="gender"value="1"> male
              <input type="radio"name="gender"value="2"> female
       photo:<input type="file"name="photo"id="photo">
       <input type="button"name="btn"value="submit"onclick="submit();">       
</form>
<div id="result"></div>

functionsubmit(){
       var data = new FormData($("#formData")[0]);
       $.ajax({
              url:"    .php",
              type:"POST",
              data:data,
              dataType:"JSON",
              cache:false,
              processData:false,
              contentType:false
        }).done(function(ret){
                  if(ret["isSuccess"]){
                      var result = "";
                      result +="name=" + ret["name"] + "<br>";
                      result += "gender=" + ret["gender"] + "<br>";
                      result += "<img src='https://tool.4xseo.com/article/143833.html"+ret['photo']+"'width='100'>";
                      $("#result").html(result);         //提交成功后将表单数据显示在id="result"的div里面     
                  }else{
                         alert("提交失败");
                   }
         });
       return false;
}