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

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、南和ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的南和網(wǎng)站制作公司

一、<form></form>

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

   1、method （enctype為‘a(chǎn)pplication/x-www-form-urlencoded’的情況）

大多數(shù)情況只會用到GET和POST。

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

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

兩者主要區(qū)別：

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

2、enctype

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

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

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

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

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

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

該選項是上傳文件時必須使用的選項，將enctype設(shè)置為"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，使用它可以實現(xiàn)ajax的文件提交：

下面來看FormData的使用方法：

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

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

// 其他代碼

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

xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData構(gòu)造函數(shù)創(chuàng)建一個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對象，有關(guān)file對象的知識限于篇幅暫不講解，有興趣可以自行百度。

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

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

新聞名稱：如何使用form、FormData進行的文件提交
分享地址：http://www.chinadenli.net/article38/jogdsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、品牌網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站改版、網(wǎng)站維護、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)