成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

developerworks / 702人閱讀

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

系列文章

關(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ù)覽等實(shí)戰(zhàn)(附DEMO)

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

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

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

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

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

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

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

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

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

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

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

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

new FormData(form)

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

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

formData.get(name)

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




  
    
  

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



  
    
  

  
    

      
      
      
    

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

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

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

方法會(huì)返回該 FormData 對(duì)象指定 key 的所有值。




  
    
  

  
    

      
      
      
    

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

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

FormData.keys()

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

FormData.values()

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




  
    
  

  
    

      
      
      
    

    
你輸出的值為:

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106288.html

相關(guān)文章

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

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

    iKcamp 評(píng)論0 收藏0

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

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

    scola666 評(píng)論0 收藏0

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

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

    SnaiLiu 評(píng)論0 收藏0

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

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

    i_garfileo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<