1.html表單上傳（不推薦）

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

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

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

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

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

enctype有以下幾種取值：

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

?

2.Ajax無刷新上傳（jquery---ajax上傳）

ajax和FormData可實現頁面無刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。通過FormData對象可以更靈活方便的發送表單數據，因為可以獨立于表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit()方法傳輸的數據格式相同。

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

<form><input id="file" name="file" type="file" /><input id="token" name="token" type="hidden" /> </form> $("#file").on("change", function(){var formData = new FormData();formData.append("file", $("#file")[0].files);formData.append("token", $("#token").val());$.ajax({url: "http://uploadUrl",type: "POST",data: formData,processData: false,contentType: false,success: function(response){// 根據返回結果指定界面操作}}); });

我們使用了file控件的change來觸發上傳事件，當然你也可以使用某個按鈕來觸發表單提交。提交數據時，用到了FormData對象來發送二進制文件，FormData構造函數提供的append()方法，除了直接添加二進制文件還可以附帶一些其它的參數， 作為XMLHttpRequest實例的參數提交給服務端。

使用jQuery提供的ajax方法來發送二進制文件，還需要附加兩個參數：

processData: false // 不要對data參數進行序列化處理，默認為true
contentType: false // 不要設置Content-Type請求頭，因為文件數據是以 multipart/form-data 來編碼

3.web文件上傳插件??Web Uploader?----?支持多圖上傳，大文件上傳，壓縮圖片上傳，預覽等

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

?

?

各類插件上傳

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

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

總結

以上是生活随笔為你收集整理的图片上传几种方式总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。