?
FormData可以憑空創(chuàng)建一個對象，然后往這個對象里面添加數(shù)據(jù)，然后直接提交，不需要寫一行html代碼，如下：
? ? ? ? ?var form =new FormData();
? ? ? ? ? form.append("username","zxj");
? ? ? ? ? form.append("password",123456);
? ? ? ? ? var req =new XMLHttpRequest();
? ? ? ? ? req.open("post", "${pageContext.request.contextPath}/public/testupload",false);
? ? ? ? ? req.send(form);
這樣就可以向瀏覽器發(fā)送表單數(shù)據(jù)了，或者也可以使用Jquery這樣發(fā)送：
?var form =new FormData();
? form.append("username","zxj");
? form.append("password",123456);
$.ajax({
? ? ? ? ? ? ? ? url:"${pageContext.request.contextPath}/public/testupload",
? ? ? ? ? ? ? ? type:"post",
? ? ? ? ? ? ? ? data:form,
? ? ? ? ? ? ? ? processData:false,
? ? ? ? ? ? ? ? contentType:false,
? ? ? ? ? ? ? ? success:function(data){
? ? ? ? ? ? ? ? ? ? window.clearInterval(timer);
? ? ? ? ? ? ? ? ? ? console.log("over..");
? ? ? ? ? ? ? ? }
});
這樣也可以直接發(fā)送數(shù)據(jù)到后臺。
你以為這就完了？不！這才剛開始呢！！
其次FormData還支持直接從html中的表單生成數(shù)據(jù)，就是在html頁面中已經(jīng)有數(shù)據(jù)了，然后FormData可以直接把這個表單的數(shù)據(jù)寫入這個對象，然后直接提交給后臺
代碼如下，先給出html代碼:
<form id="tf">
? ? ? ? ? ? <input type="file" name="img"/>
? ? ? ? ? ? <input type="text" name="username"/>
? ? ? ? ? ? <input type="button" value="提" onclick="test();"/>
? ? ? ? ? ? ? ? ? ? ? ? .............
</form>
大家注意到?jīng)]有，里面可是有文件的哦！
沒錯，F(xiàn)ormData還支持困擾眾多開發(fā)者已久的ajax的上傳文件，以前我們上傳文件，需要寫一個表單直接刷新提交，但是這里不需要，下面給出提交代碼：
function test(){
? ? ? ? ? ? varform =newFormData(document.getElementById("tf"));
// var req = new XMLHttpRequest();
//? req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//? req.send(form);? ? ? ? ? ??
$.ajax({
? ? ? ? ? ? ? ? url:"${pageContext.request.contextPath}/public/testupload",
? ? ? ? ? ? ? ? type:"post",
? ? ? ? ? ? ? ? data:form,
? ? ? ? ? ? ? ? processData:false,
? ? ? ? ? ? ? ? contentType:false,
? ? ? ? ? ? ? ? success:function(data){
? ? ? ? ? ? ? ? ? ? window.clearInterval(timer);
? ? ? ? ? ? ? ? ? ? console.log("over..");
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? error:function(e){
? ? ? ? ? ? ? ? ? ? alert("錯誤?。?);
? ? ? ? ? ? ? ? ? ? window.clearInterval(timer);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });? ? ? ?
? ? ? ? ? ? get();//此處為上傳文件的進度條}
就是這么簡單，使用FormData，在構(gòu)造這個對象的時候，把表單的對象，作為一個參數(shù)放進去，就可以了，然后FormData，就會得到這個表單對象里面的所有的參數(shù)，甚至我們在表單中，都不需要聲明enctype ="multipart/form-data" ，就可以直接提交。
使用FormData，第一是在提交表單的時候，不需要寫大量的js來獲得表單數(shù)據(jù)，直接把表單對象構(gòu)造就行了。第二就是可以直接異步上傳文件，簡單牛逼爆了！
注意：使用FormData提交的時候，大家會注意到表單提交的是request payload，具體有興趣的同學(xué)可以自己百度，它不是之前的Form data提交的，所以后臺也是要經(jīng)過處理的，比如springMVC就需要配置
<!-- 配置nultipartresolver,注意：id名必須這樣寫，不然會報錯 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="UTF-8"></property><property name="maxInMemorySize" value="10240000"></property></bean>
不然會接收不到數(shù)據(jù)，當然，后臺的話，我們這里就先不管。
方法二：使用jquery.form.js
Options對象
ajaxForm和ajaxSubmit都支持眾多的選項參數(shù)，這些選項參數(shù)可以使用一個Options對象來提供。
它也支持對一個表單的ajax提交，而且提交方式更為簡便，如下：
<form id="tf">
<input type="file" name="img"/>
<input type="text" name="username"/>
<input type="button" value="提" onclick="test();"/>
</form>
下面使用jquery.form.js的表單插件來提交表單
$("#tf").ajaxSubmit();
就是這么簡單，你也不要問我為什么就是這么簡單，然后它就是會把整個表單，作為一個ajax來提交，同樣的，它也支持文件上傳！一些其它的用法，請參照前面給出的說明就可以了
原文鏈接? ? ?https://www.cnblogs.com/zhuxiaojie/p/4783939.html#autoid-1-0-0
