首頁 > 文章 > web前端 > 使用form、FormData進行的文件提交。

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

jacklove原創: 2018-06-11 22:38:453069瀏覽

一、ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e

在進行文件提交的說明之前，我們先回顧一下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"後就可以使用3525558f8f338d4ea90ebf22e5cde2bc進行檔案上傳了，下面是一個demo範例：

形式動作= “ server.js” 方法=#「POST」 enctype="multipart/form-data">#
##輸入類型#="檔案" 名稱="file0">#
  8a1975a2cebea3ab89017bd0f4079b4d


ffe640db802ecfcf4e8e7070af298ea8



##除了使用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(&#39;file0&#39;, oInput.value);
//注意，这里的value不是普通的表单value，而是一个file对象 
formData.append(&#39;file0&#39;, oInput.files[0]); 
xhr.open(&#39;POST&#39;, &#39;http://localhost:8080&#39;);  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①，而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);
```
############上面有提到，傳入append的值，不是普通的input的value，而是一個file對象，有關file對象的知識限於篇幅暫不講解，有興趣可以自行百度。 ######而除了這些，對文件的操作除了一般的小體積文件，更多的則是類似於視頻網站對視頻這種大型文件的操作，僅僅了解這些是不足以完成這些工作的。也要學習有關的API和深入理解blob物件。大家可以自己下去學習，有關這方面的總結我會在以後發表。 ######本文說明了使用form、FormData進行的文件提交相關內容，更多相關內容請關注php中文網。 ######相關推薦：#########JQuery中DOM操作－wrap###############django 使用request 取得瀏覽器傳送的參數# ##############React this綁定的幾點思考##########

以上是使用form、FormData進行的文件提交。的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：【js基礎】變數類型判斷下一篇：【js基礎】變數類型判斷

看更多