1.表單上傳

最傳統(tǒng)的圖片上傳方式是form表單上傳，使用form表單的input[type=”file”]控件，打開(kāi)系統(tǒng)的文件選擇對(duì)話(huà)框，從而達(dá)到選擇文件并上傳的目的。

?

表單上傳需要注意以下幾點(diǎn)：

(1).提供form表單，method必須是post。

(2).form表單的enctype必須是multipart/form-data。

enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為 "application/x-www-form-urlencoded"。就是說(shuō)，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼。HTML表單如何打包數(shù)據(jù)文件是由enctype這個(gè)屬性決定的。enctype有以下幾種取值：

application/x-www-form-urlencoded：在發(fā)送前編碼所有字符(默認(rèn))(空格被編碼為’+’，特殊字符被編碼為ASCII十六進(jìn)制字符)。

multipart/form-data：不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)，必須使用該值。

text/plain：空格轉(zhuǎn)換為 “+” 加號(hào)，但不對(duì)特殊字符編碼。

默認(rèn)enctype=application/x-www-form-urlencoded，所以表單的內(nèi)容會(huì)按URL規(guī)則編碼，然后根據(jù)表單的提交方法：

method=’get’ 編碼后的表單內(nèi)容附加在請(qǐng)求連接后，

method=’post’ 編碼后的表單內(nèi)容作為post請(qǐng)求的正文內(nèi)容。

(3).提供input type="file"上傳輸入域。

瀏覽器請(qǐng)求體如下：

2.ajax上傳

ajax和FormData可實(shí)現(xiàn)頁(yè)面無(wú)刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的

FormData接口。通過(guò)FormData對(duì)象可以更靈活方便的發(fā)送表單數(shù)據(jù)，因?yàn)榭梢元?dú)立于表單使用。如果你把表單的編碼類(lèi)型設(shè)置為multipart/form-data ，則通過(guò)FormData傳輸?shù)臄?shù)據(jù)格式和表單通過(guò)submit()方法傳輸?shù)臄?shù)據(jù)格式相同。

Ajax無(wú)刷新上傳的方式，本質(zhì)上與表單上傳無(wú)異，只是把表單里的內(nèi)容提出來(lái)采用ajax提交，并且由前端決定請(qǐng)求結(jié)果回傳后的展示結(jié)果。

3.各類(lèi)插件上傳

當(dāng)上傳的需求要求可預(yù)覽、顯示上傳進(jìn)度、中斷上傳過(guò)程、大文件分片上傳等等，這時(shí)傳統(tǒng)的表單上傳很難實(shí)現(xiàn)這些功能，我們可以借助現(xiàn)有插件完成。

如百度上傳插件Web Uploader、jQuery圖片預(yù)覽插件imgPreview 、拖拽上傳與圖像預(yù)覽插件Dropzone.js等等，大家可根據(jù)項(xiàng)目實(shí)際需求選擇適合的插件。

轉(zhuǎn)載于:https://www.cnblogs.com/byk1112/p/8028191.html

總結(jié)

以上是生活随笔為你收集整理的web上传图片的几种方法！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。