xmlhttprequest level2 添加了一个新的接口——formdata 。【 主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的ajax相比，它能异步上传二进制文件 】
利用formdata对象，可通过js用一些键值对来模拟一系列表单控件，还可以使用xmlhttprequest的send()方法异步提交表单。
首先，在之前的“前后台交互之传参方式”中讲了传统的form表单提交的方式（表单序列化），它只适用于传递一般参数，上传文件的文件流是无法被序列化并传递的。所以，使用formdata，可以轻松的和ajax结合进行文件上传。
一、在介绍使用formdata进行ajax请求并上传文件之前，先来认识一下formdata以及它的使用：：：：：w3c 草案提供了三种方案来获取或修改 form data :::
way1：创建一个空的 form data 对象，再用 append() 逐个添加键值对
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对象包含的文件内容是ofilebodyomyform.append("webmasterfile",oblob);var oreq = new xmlhttprequest();oreq.open("post"," .php");opeq.send(omyform); // 使用xmlhttprequest的send()把数据发送出去
上面的"userfile"和"webmasterfile"的值都包含了一个文件；
字段的值可以是一个blob对象，file对象或者字符串，别的类型都会被自动转换成字符串——例如上面的"accountnum" 。
way2：取form元素对象作为参数传入formdata对象中
—— 伪代码 ——
var new_formdata = new formdata( someformelement );
例：
var formelement = document.getelementbyid("myformelement");var oreq = new xmlhttprequest();oreq.open("post"," .php");oreq.send(new formdata(formdata));
也可以在已有表单基础上继续添加新的键值对：
var formelement = document.getelementbyid("myformelement");var formdata = new formdata(formelement);formdata.append("serialnumber",serialnumber++);var oreq = new xmlhttprequest();oreq.send(formdata);
可以通过这种方式添加一些不想让用户编辑的固定字段，然后再发送。
way3：利用form对象的getformdata方法生成
var formobj = document.getelementbyid("myformelement");var formdata = formobj.getformdata();
利用 formdata 对象，结合原生的 js，通过 ajax 实现异步上传图片。当然，现在已有的 jquery 批量上传的插件，原理就是利用 formdata。
二、使用 formdata对象发送二进制文件：：：：：：way1:通过 form 表单来初始化 formdata
1、在 html 中有一个包含文件输入框的 form 元素
<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><p id="output"></p><a href="javascript:sendform()">stash the file !</a>
2、异步上传用户所选的文件
function sendform(){ var ooutput = document.getelementbyid("output"); var odata = new formdata(document.forms.nameitem("fileinfo")); odata.append("customfield","this is some extra data"); var oreq = new xmlhttprequest(); 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);}
way2:不借助 form 表单，直接向 formdata 对象中添加一个 file 对象或者一个 blob 对象
var data = new formdata();var ofilebody = "<a id="a"><b id="b">hey!</b></a>";var oblob = new blob([ofilebody],{type:"text/html"});data.append("myfile",oblob);
如果 formdata 对象中某个字段值是一个 blob 对象，在发送 http 请求时，代表该 blob 对象所包含文件的文件名的 “content-disposition” 请求的值在不同浏览器中不同：
firefox 使用固定的字符串 "blob"，而 chrome使用一个随机字符串。
way3：使用 jquery 发送 formdata（要正确设置相关项）
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请求头});
三、例子1、使用 fromdata 进行 ajax 请求，并上传文件
<form id="uploadform"> 指定文件名:<input type="text" name="filename" value=""> 上传文件:<input type="file" name="file"> <input type="button" value="上传" onclick="doupload()"></form>
function doupload(){ 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); } });}
2、使用 formdata 提交表单及上传图片
<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><p id="result"></p>
function submit(){ 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='"+ret['photo']+"'width='100'>"; $("#result").html(result); // 提交成功后将表单数据显示在id="result"的p里面 }else{ alert("提交失败"); } }); return false;}
四、浏览器兼容性chrome firefox(gecko) ie opera safari
7+ 4.0(2.0)+ 10+ 12+ 5+
相关推荐：
jquery用formdata实现文件上传的方法
使用formdata进行ajax的上传文件
以上就是formdata对象进行ajax请求，上传文件的详细内容。