亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

developerworks / 770人閱讀

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

系列文章

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

FormData對象(知識點(diǎn)主要來源于關(guān)于FormData API)

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

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

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

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

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

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

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

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

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

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

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

new FormData(form)

參數(shù)可選,一個HTML上的

表單元素——當(dāng)指定了，這種方式創(chuàng)建的FormData對象會自動將form中的表單值也包含進(jìn)去，包括文件內(nèi)容也會被編碼之后包含進(jìn)去。

formData.get(name)

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




  
    
  

  
    
      
      
      
    
    
你輸出的值為:
formData.set(name, value, filename)
參數(shù) 描述
name 字段名稱
value 字段的值，如果是傳入兩個參數(shù)的方式，那么該值是一個 USVString，如果不是，將被轉(zhuǎn)成一個字符串。如果是傳入三個參數(shù)的方式，那么該值將是一個布爾值（Blob），文件（File），或者一個 USVString，如果不是，將被轉(zhuǎn)成一個字符串
filename 可選:傳給服務(wù)器的文件名稱（一個USVString）。當(dāng)?shù)诙€參數(shù)是一個布爾值（Blob）或者文件（File）的時候，Blob 對象的默認(rèn)文件名是 "blob" 



  
    
  

  
    

      
      
      
    

    
你輸出的值為:
formData.append(name, value, filename)

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

參數(shù) 描述
name value中包含的數(shù)據(jù)對應(yīng)的表單名稱
value 表單的值?？梢允荱SVString 或 Blob (包括子類型，如 File)
filename 可選:傳給服務(wù)器的文件名稱 (一個 USVString), 當(dāng)一個 Blob 或 File 被作為第二個參數(shù)的時候， Blob 對象的默認(rèn)文件名是 "blob"。 File 對象的默認(rèn)文件名是該文件的名稱
getAll()

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




  
    
  

  
    

      
      
      
    

    
你輸出的值為:
FormData.entries()

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

FormData.keys()

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

FormData.values()

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




  
    
  

  
    

      
      
      
    

    
你輸出的值為:

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106288.html

相關(guān)文章

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(五) ----- H5拖拽事件

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

    iKcamp 評論0 收藏0

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File

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

    scola666 評論0 收藏0

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)

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

    SnaiLiu 評論0 收藏0

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest

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

    i_garfileo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<