關于前端上傳文件全面基礎掃盲貼(三) ----- FormData

developerworks 發布于2019-08-26 10:30 / 700人閱讀

摘要：如果是傳入三個參數的方式，那么該值將是一個布爾值，文件，或者一個，如果不是，將被轉成一個字符串可選傳給服務器的文件名稱一個。

系列文章

關于前端上傳文件全面基礎掃盲貼(零)
關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關于前端上傳文件全面基礎掃盲貼(二) ----- File
關于前端上傳文件全面基礎掃盲貼(三) ----- FormData
關于前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

FormData對象(知識點主要來源于關于FormData API)

摘自上面來源,分析的挺好,我就無恥得搬下來了FormData 對象的使用(直接看這個有點蒙圈,建議先看API再看這個實戰代碼好點,我就是踩過坑的人...╮(╯▽╰)╭)

通過FormData對象可以組裝一組用 XMLHttpRequest發送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit() 方法傳輸的數據格式相同,與普通的ajax相比，使用FormData的最大優點就是可以異步上傳二進制文件

FormData對象FormData對象可以把所有表單元素的name與value組成一個queryString,提交到后臺。在使用ajax提交時，使用FormData對象可以減少拼接queryString的工作量
queryString是查詢字符串，http查詢字符串由url中？后面的值指定
當頁面上的form以GET方式向頁面發送請求數據時 (如數據含有不安全字符，則瀏覽器先將其轉換成16進制的字符再傳送，如空格被轉換成%20時 ) ,web server 將請求數據放入一名為QUERY_STRING的環境變量中。 Request.queryString 方法是從這一環境變量中取出相應的值，并將被轉成16進制的字符還原

說了這么多,還是要先看看兼容性如何,這么一看,還好啊(溫馨提示:下圖只代表支持程度,支持歸支持,不一定百分百支持,所以用到部分方法時不兼容時正常的)

先說說我上面說過的坑是怎么回事吧,我就按照實戰代碼寫,然后以為能直接看到我塞進去的東西,然而...

var oMyForm = new FormData();
oMyForm.append("name", "Grady");
console.log(oMyForm) // 我以為會輸出Grady的,但是返回的是FormData對象

好吧,這里打印出[object FormData]這玩意,chrome里長這樣子的

咦,怎么是個空的東西?我塞進去的數據呢?然后看到本身那堆方法,經過我大膽猜測跟虛心求教之后,FormData本身就這設置,想要看到屬性只能去用方法拿到,所以...

var oMyForm = new FormData();
oMyForm.append("name", "Grady");
console.log(oMyForm.get("name"))

這里就涉及到兼容性問題了,如果不兼容的話會輸出TypeError: oMyForm.get is not a function,如果正常的話就輸出"Grady".
下面的代碼也是,我一開始使用獵豹瀏覽器編輯的,后來只好轉為chrome正常寫下去

下面我們簡單過一下比較常用的方法:

new FormData(form)

參數可選,一個HTML上的

表單元素——當指定了，這種方式創建的FormData對象會自動將form中的表單值也包含進去，包括文件內容也會被編碼之后包含進去。

formData.get(name)

用于返回FormData對象中和指定的鍵關聯的第一個值，如果你想要返回和指定鍵關聯的全部值，那么可以使用getAll()方法。

name:

你輸出的值為:

formData.set(name, value, filename)

參數	描述
name	字段名稱
value	字段的值，如果是傳入兩個參數的方式，那么該值是一個 USVString，如果不是，將被轉成一個字符串。如果是傳入三個參數的方式，那么該值將是一個布爾值（Blob），文件（File），或者一個 USVString，如果不是，將被轉成一個字符串
filename	可選:傳給服務器的文件名稱（一個USVString）。當第二個參數是一個布爾值（Blob）或者文件（File）的時候，Blob 對象的默認文件名是 "blob"

你輸出的值為:

formData.append(name, value, filename)

set() 和 append() 的區別在于，如果指定的鍵已經存在，set()會使用新值覆蓋已有的值，而 append() 會把新值添加到已有值集合的后面。

參數	描述
name	value中包含的數據對應的表單名稱
value	表單的值。可以是USVString 或 Blob (包括子類型，如 File)
filename	可選:傳給服務器的文件名稱 (一個 USVString), 當一個 Blob 或 File 被作為第二個參數的時候， Blob 對象的默認文件名是 "blob"。 File 對象的默認文件名是該文件的名稱

getAll()

方法會返回該 FormData 對象指定 key 的所有值。

你輸出的值為:

FormData.entries()

返回一個 iterator對象，此對象可以遍歷訪問FormData中的鍵值對。其中鍵值對的key是一個 USVString 對象；value是一個 USVString , 或者 Blob對象。

FormData.keys()

返回一個迭代器（iterator），遍歷了該 formData 包含的所有key ，這些 key 是 USVString 對象。

FormData.values()

返回一個允許遍歷該對象中所有值的迭代器。這些值是 USVString 或是Blob 對象。

你輸出的值為:

GPU云服務器云服務器服務器掃盲貼 formdata上傳文件關于前端關于前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106288.html

關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件

摘要：在中，拖放是標準的一部分，任何元素都能夠拖放。如果需要設置允許放置，我們必須阻止對元素的默認處理方式方法。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文件全面基礎掃盲貼(...

iKcamp 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(二) ----- File

摘要：為了解救上面說到的問題是向提交的一個草案，旨在推出一套標準的，其基本功能是實現用對本地文件進行操作。出于安全性的考慮，該只對本地文件提供有限的訪問。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- For...

scola666 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(零)

摘要：表單用于向服務器傳輸數據。屬性對象的屬性指定了一個事件句柄函數。標簽的屬性應當與相關元素的屬性相同。詳情查閱請狠狠地點擊關于對象代表表單中的一個提交按鈕在表單提交之前，觸發事件句柄，并且一個句柄可以通過返回來取消表單提交。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) -...

SnaiLiu 2019-08-02 15:42 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest

摘要：狀態表示對象的狀態狀態描述未初始化。表示成功，表示未找到，表示服務器內部錯誤等。前提是瀏覽器必須支持這個功能，而且服務器端必須同意這種跨域。事件傳輸成功完成。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----...

i_garfileo 2019-08-26 10:29 評論0 收藏0