如何使用form、FormData進行的文件提交

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

一、<form></form>

在進行文件提交的說明之前，我們先來回顧一下form標簽。form有很多屬性，在這里我僅說明以下兩個屬性：

   1、method （enctype為‘application/x-www-form-urlencoded’的情況）

大多數情況只會用到GET和POST。

 ①GET：在使用GET進行表單提交時， 用戶代理（瀏覽器）會自動按照name=value對每一個input組件進行處理（對name和value分別使用encodeURIComponent進行編碼，然后使用‘=’連接編碼后的鍵值對，多個鍵值對之間使用‘&’進行連接）從而產生一個查詢字符串，連接在url的后面。

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

兩者主要區別：

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

2、enctype

上面提到，form表單的默認值為‘application/x-www-form-urlencoded’,這就是enctype的三個值的其中之一，接下來我們詳細討論一下這三個值。

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

②text/plain: 取這個值時，表單的值將不會進行編碼，而是使用純文本的方式提交到后臺server，這個值基本沒人用，因為在進行文件的提交時，不能提供對二進制數據的良好支持。

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

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

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

該選項是上傳文件時必須使用的選項，將enctype設置為"multipart/form-data"后就可以使用<input type="file">進行文件上傳了，下面是一個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表單進行文件的提交，平常更多的是無刷新頁面的ajax，下面來看看如何使用ajax無刷新提交文件！

二、FormData

FormData是ES提供的一個API，使用它可以實現ajax的文件提交：

下面來看FormData的使用方法：

var formData = new FormData();   //創建實例,可以傳入form對應的DOM節點作為參數，則表單中的數據就會保存到formData實例中。

formData.append(name, value);   //使用方法append，傳入對應的鍵和值

// 其他代碼

最后將form實例扔到xhr.send()；中即可。

xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData構造函數創建一個FormData的實例 
var formData = new FormData(); 
// formData.append('file0', oInput.value);
//注意，這里的value不是普通的表單value，而是一個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表單的默認值為①，而FormData的默認值為multipart/form-data,所以不用畫蛇添足的去修改請求頭  
//xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formData);

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

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

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