前端圖片上傳的幾種方式


一、.html表單上傳(不推薦)

最傳統的圖片上傳方式是form表單上傳,使用form表單的input[type=”file”]控件,打開系統的文件選擇對話框,從而達到選擇文件並上傳的目的。

web上傳圖片的幾種方法

form表單上傳。表單上傳需要注意以下幾點:

1、.提供form表單,method必須是post。

2、form表單的enctype必須是multipart/form-data。

enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。默認地,表單數據會編碼為 "application/x-www-form-urlencoded"。就是說,在發送到服務器之前,所有字符都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。

enctype有以下幾種取值:

application/x-www-form-urlencoded:在發送前編碼所有字符(默認)(空格被編碼為’+’,特殊字符被編碼為ASCII十六進制字符)。
multipart/form-data:不對字符編碼。在使用包含文件上傳控件的表單時,必須使用該值。
text/plain:空格轉換為 “+” 加號,但不對特殊字符編碼。
默認enctype=application/x-www-form-urlencoded,所以表單的內容會按URL規則編碼,  

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

瀏覽器請求體如下:下圖為請求體

web上傳圖片的幾種方法

 

二、jquery---ajax上傳

ajax和FormData可實現頁面無刷新的文件上傳效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的

FormData接口。通過FormData對象可以更靈活方便的發送表單數據,因為可以獨立於表單使用。如果你把表單的編碼類型設置為multipart/form-data ,則通過FormData傳輸的數據格式和表單通過submit()方法傳輸的數據格式相同。

web上傳圖片的幾種方法

ajax無刷新上傳

Ajax無刷新上傳的方式,本質上與表單上傳無異,只是把表單里的內容提出來采用ajax提交,並且由前端決定請求結果回傳后的展示結果。

三、web  文件上傳插件  Web Uploader   ----  支持多圖上傳,大文件上傳,壓縮圖片上傳,預覽等

  官網 : http://fex.baidu.com/webuploader/

  官網已經有

 

 

 

各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等,這時傳統的表單上傳很難實現這些功能,我們可以借助現有插件完成。

如百度上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等,大家可根據項目實際需求選擇適合的插件。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM