如何使用form、FormData進(jìn)行的文件提交

這篇文章主要介紹了如何使用form、FormData進(jìn)行的文件提交，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、<form></form>

在進(jìn)行文件提交的說明之前，我們先來回顧一下form標(biāo)簽。form有很多屬性，在這里我僅說明以下兩個(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對每一個(gè)input組件進(jìn)行處理（對name和value分別使用encodeURIComponent進(jìn)行編碼，然后使用‘=’連接編碼后的鍵值對，多個(gè)鍵值對之間使用‘&’進(jìn)行連接）從而產(chǎn)生一個(gè)查詢字符串，連接在url的后面。

       ②POST:POST同樣會(huì)生成一個(gè)和GET一樣的字符串，只不過這個(gè)字符串是在http請求頭中寫入的，而不是加到url的后面。

兩者主要區(qū)別：

GET提交數(shù)據(jù)的大小有限制，一般是2kb，而POST理論上沒有限制（不過實(shí)際大小在2GB左右）。

2、enctype

上面提到，form表單的默認(rèn)值為‘a(chǎn)pplication/x-www-form-urlencoded’,這就是enctype的三個(gè)值的其中之一，接下來我們詳細(xì)討論一下這三個(gè)值。

①application/x-www-form-urlencode：表單提交的默認(rèn)值，POST和GET對應(yīng)的行為在上面已經(jīng)討論過，這里不再贅述；

②text/plain: 取這個(gè)值時(shí)，表單的值將不會(huì)進(jìn)行編碼，而是使用純文本的方式提交到后臺(tái)server，這個(gè)值基本沒人用，因?yàn)樵谶M(jìn)行文件的提交時(shí)，不能提供對二進(jìn)制數(shù)據(jù)的良好支持。

③multipart/form-data: 當(dāng)enctype使用該選項(xiàng)時(shí)，瀏覽器將不會(huì)對字符進(jìn)行編碼，取而代之的是：以控件（input等）為單位進(jìn)行分割，為每個(gè)控件加上Content-Disposition:form-data、name(input對應(yīng)的name)，filename（如果提交的是文件會(huì)有改字段），以及Content-Type（和上一個(gè)字段相同，提交文件時(shí)存在）：文件類型（很容易偽造）。并且還會(huì)加上boundary（分隔符，不同瀏覽器不同，每次提交也不同）

最終這些信息會(huì)被整合到一起，編碼為一條消息提交到server（二進(jìn)制數(shù)據(jù)形式）。

需要注意的是：由于主要的用途是進(jìn)行文件的上傳，對上傳的大小有一定要求，所以method只能選擇為POST，若使用GET進(jìn)行上傳，則只會(huì)提交文件的一個(gè)假路徑。

該選項(xiàng)是上傳文件時(shí)必須使用的選項(xiàng)，將enctype設(shè)置為"multipart/form-data"后就可以使用<input type="file">進(jìn)行文件上傳了，下面是一個(gè)demo示例：

1. <form action="server.js" method="POST" enctype="multipart/form-data">

2.  <input type="file" name="file0">

3.  <input type="submit" value="upload">

4. </form>

除了使用form表單進(jìn)行文件的提交，平常更多的是無刷新頁面的ajax，下面來看看如何使用ajax無刷新提交文件！

二、FormData

FormData是ES提供的一個(gè)API，使用它可以實(shí)現(xiàn)ajax的文件提交：

下面來看FormData的使用方法：

var formData = new FormData();   //創(chuàng)建實(shí)例,可以傳入form對應(yīng)的DOM節(jié)點(diǎn)作為參數(shù)，則表單中的數(shù)據(jù)就會(huì)保存到formData實(shí)例中。

formData.append(name, value);   //使用方法append，傳入對應(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對象 
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,所以不用畫蛇添足的去修改請求頭  
//xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formData);

上面有提到，傳入append的值，不是普通的input的value，而是一個(gè)file對象，有關(guān)file對象的知識(shí)限于篇幅暫不講解，有興趣可以自行百度。

而除了這些，對文件的操作除了一般的小體積文件，更多的則是類似于視頻網(wǎng)站對視頻這種大型文件的操作，僅僅了解這些是不足以完成這些工作的。還要學(xué)習(xí)有關(guān)的API和深入理解blob對象。 大家可以自己下去學(xué)習(xí)， 有關(guān)這方面的總結(jié)我會(huì)在以后發(fā)表。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用form、FormData進(jìn)行的文件提交”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!