這篇文章主要介紹了如何使用form、FormData進(jìn)行的文件提交，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
一、
在進(jìn)行文件提交的說(shuō)明之前，我們先來(lái)回顧一下form標(biāo)簽。form有很多屬性，在這里我僅說(shuō)明以下兩個(gè)屬性：
1、method （enctype為‘a(chǎn)pplication/x-www-form-urlencoded’的情況）
大多數(shù)情況只會(huì)用到GET和POST。
①GET：在使用GET進(jìn)行表單提交時(shí)， 用戶代理（瀏覽器）會(huì)自動(dòng)按照name=value對(duì)每一個(gè)input組件進(jìn)行處理（對(duì)name和value分別使用encodeURIComponent進(jìn)行編碼，然后使用‘=’連接編碼后的鍵值對(duì)，多個(gè)鍵值對(duì)之間使用‘&’進(jìn)行連接）從而產(chǎn)生一個(gè)查詢字符串，連接在url的后面。
②POST:POST同樣會(huì)生成一個(gè)和GET一樣的字符串，只不過(guò)這個(gè)字符串是在http請(qǐng)求頭中寫入的，而不是加到url的后面。
兩者主要區(qū)別：
GET提交數(shù)據(jù)的大小有限制，一般是2kb，而POST理論上沒(méi)有限制（不過(guò)實(shí)際大小在2GB左右）。
2、enctype
上面提到，form表單的默認(rèn)值為‘a(chǎn)pplication/x-www-form-urlencoded’,這就是enctype的三個(gè)值的其中之一，接下來(lái)我們?cè)敿?xì)討論一下這三個(gè)值。
①application/x-www-form-urlencode：表單提交的默認(rèn)值，POST和GET對(duì)應(yīng)的行為在上面已經(jīng)討論過(guò)，這里不再贅述；
②text/plain: 取這個(gè)值時(shí)，表單的值將不會(huì)進(jìn)行編碼，而是使用純文本的方式提交到后臺(tái)server，這個(gè)值基本沒(méi)人用，因?yàn)樵谶M(jìn)行文件的提交時(shí)，不能提供對(duì)二進(jìn)制數(shù)據(jù)的良好支持。
③multipart/form-data: 當(dāng)enctype使用該選項(xiàng)時(shí)，瀏覽器將不會(huì)對(duì)字符進(jìn)行編碼，取而代之的是：以控件（input等）為單位進(jìn)行分割，為每個(gè)控件加上Content-Disposition:form-data、name(input對(duì)應(yīng)的name)，filename（如果提交的是文件會(huì)有改字段），以及Content-Type（和上一個(gè)字段相同，提交文件時(shí)存在）：文件類型（很容易偽造）。并且還會(huì)加上boundary（分隔符，不同瀏覽器不同，每次提交也不同）
最終這些信息會(huì)被整合到一起，編碼為一條消息提交到server（二進(jìn)制數(shù)據(jù)形式）。
需要注意的是：由于主要的用途是進(jìn)行文件的上傳，對(duì)上傳的大小有一定要求，所以method只能選擇為POST，若使用GET進(jìn)行上傳，則只會(huì)提交文件的一個(gè)假路徑。
該選項(xiàng)是上傳文件時(shí)必須使用的選項(xiàng)，將enctype設(shè)置為"multipart/form-data"后就可以使用進(jìn)行文件上傳了，下面是一個(gè)demo示例：
除了使用form表單進(jìn)行文件的提交，平常更多的是無(wú)刷新頁(yè)面的ajax，下面來(lái)看看如何使用ajax無(wú)刷新提交文件！
二、FormData
FormData是ES提供的一個(gè)API，使用它可以實(shí)現(xiàn)ajax的文件提交：
下面來(lái)看FormData的使用方法：
var formData = new FormData(); //創(chuàng)建實(shí)例,可以傳入form對(duì)應(yīng)的DOM節(jié)點(diǎn)作為參數(shù)，則表單中的數(shù)據(jù)就會(huì)保存到formData實(shí)例中。
formData.append(name, value); //使用方法append，傳入對(duì)應(yīng)的鍵和值
// 其他代碼
最后將form實(shí)例扔到xhr.send()；中即可。
xhr.send(formData);
重慶分公司
重慶分公司
var xhr = new XMLHttpRequest();
//使用FormData構(gòu)造函數(shù)創(chuàng)建一個(gè)FormData的實(shí)例
var formData = new FormData();
// formData.append('file0', oInput.value);
//注意，這里的value不是普通的表單value，而是一個(gè)file對(duì)象
formData.append('file0', oInput.files[0]);
xhr.open('POST', 'http://localhost:8080');
xhr.onload = function(){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
console.log(xhr.responseText);
}
};
//form表單的默認(rèn)值為①，而FormData的默認(rèn)值為multipart/form-data,所以不用畫蛇添足的去修改請(qǐng)求頭
//xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formData);上面有提到，傳入append的值，不是普通的input的value，而是一個(gè)file對(duì)象，有關(guān)file對(duì)象的知識(shí)限于篇幅暫不講解，有興趣可以自行百度。
而除了這些，對(duì)文件的操作除了一般的小體積文件，更多的則是類似于視頻網(wǎng)站對(duì)視頻這種大型文件的操作，僅僅了解這些是不足以完成這些工作的。還要學(xué)習(xí)有關(guān)的API和深入理解blob對(duì)象。 大家可以自己下去學(xué)習(xí)， 有關(guān)這方面的總結(jié)我會(huì)在以后發(fā)表。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用form、FormData進(jìn)行的文件提交”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
