移動端圖片上傳元件分享

本章節分享一個jQuery實現的移動端圖片上傳元件。

Imageupload元件是使用File API+canvas 客戶端壓縮圖片，並實現檔案上傳服務端。

引數API:

（1）.loading:'.loading', 頁面顯示loading的圖示selector。

（2）.url:'', 接收資料的api介面地址。

（3）.maxFileSize:1010241024, 服務端支援的最大單檔案大小。

（4）.format:/^image/i, 支援的檔案格式. images text .....。

（5）.isCompress:true, 如果是圖片，可以開啟客戶端壓縮，減少傳輸的資料檔案。

（6）.compressNum:0.6, 圖片的壓縮率，0~1 設定為1可能最終結果比未壓縮還大，請慎用1。

（7）.beforeUpload:function(){}, 上傳之前的處理，返回false可以阻止檔案的上傳。

（8）.uploadStart: function(){}, 開始上傳的回撥。

（9）.afterUpload: function(){}, 上傳結束的回撥。

（10）.uploadProgress: function(v){} 上傳的進度條。

（11）.uploadError: function(){} 上傳錯誤的回撥。

（12）.showThumbnail:function(){} 顯示縮圖。

使用範例:

[HTML] 純文字檢視 複製程式碼
<div id="proccess"></div>
壓縮前：<div id="rrr1"></div>
 
<input type="file" multiple id="filesss" >
壓縮後：<div id="rrr2"></div>

[JavaScript] 純文字檢視 複製程式碼
$('#filesss').mobileUpload({
    url: '',
    beforeUpload: function () {
      console.log('beforeUpload')
    },
    uploadStart: function (file) {
      console.log('uploadStart')
      console.log('原檔案大小：' + file.length);
    },
    uploadProgress: function (v) {console.log('進度' + v)},
    uploadError: function () {console.log('uploadError')},
    showThumbnail: function (file) {
  
      $('#rrr1').append('<img src="' + file + '">');
    },
    afterUpload: function (file, data) {
      console.log('壓縮後大小：' + file.length);
      $('#rrr2').append('<img src="' + file + '">');
    }
  });