plupLoad修改成通用方法上傳圖片

最近技術負責人要求項目中全部的圖片以及視頻上傳所有有七牛雲改成阿里雲。而後看了阿里雲OSS。以前的作法是剛開始先上傳到後臺，而後後端服務器上傳到阿里雲。這樣搞了幾回，發現了代碼冗餘過多。而且在界面中新增或者修改的時候都須要將ajax請求設置mimeType爲"multipart/form-data",又翻了翻文檔。找到了後端受權，前端直傳文件到阿里雲OSS上面去。下載了他們代碼。發現他們使用了plupLoad這個上傳組件。如今就剩把這個plupLoad組件改爲通用的以後全部頁面只須要引用一個通用js。而後傳入一些值，即可使用。 這個plupLoad剛開始須要設置一些參數，以後調用init();方法進行實例化。以後綁定其他的監聽事件。

var uploader = new plupload.Uploader({
      browse_button: 須要點擊上傳的DOM元素,dom元素必須是界面中存在.否則仍然實例化會不成功的
      flash_swf_url: 'lib/plupload-2.1.2/js/Moxie.swf',
      url: ossUploadToken.host,//上傳文件的路徑，這個路徑不能爲空，否則uploader不能init成功
      filters: {
          mime_types:[
  		{title: "Image files", extensions: "jpg,gif,png,bmp"},
  		{title: "Zip files", extensions: "zip,rar"}
  		],//能夠選擇過濾那些文件，能夠進行上傳的後綴名
          max_file_size: '10mb', //最大隻能上傳10mb的文件
          prevent_duplicates: true //不容許選取重複文件
      }
  });
  uploader.init();
//圖片選擇完畢觸發
    uploader.bind('FilesAdded',function(uploader,files){
       xxxx
    });

只會便設想，若是我把 「browse_button」 設置爲全局變量,設置一個成功函數，失敗函數。當頁面中多個上傳按鈕點擊的時候。動態把這個全局變量更改，把成功函數，失敗函數賦值。是否能夠達到動態更改上傳按鈕的目的呢。以前沒有接觸過。致使後來纔想通。若是這樣能夠的話，還要init幹什麼。我又去翻了翻文檔，在文檔裏面的時候有個refresh()方法。我試了試，也沒有到達效果。應該是這個按鈕在開始init()的時候，會動態給dom元素綁定了能夠選擇文件框等方法。 那就每一個按鈕點擊都去實例化一個upload對象，實驗結果點第一次的時候沒反應。第二次的時候出來了，而點第三次的時候彈出了兩個文件選擇框。若是在實例化以前的時候，把upload對象調用的destroy方法如何。但是這樣也就永遠不出來了。 以後想到的方法是

var uploaderImageFilter = {title: "Image files", extensions: "jpg,gif,png,bmp"};
var uploaderZipFilter = {title: "Zip files", extensions: "zip,rar"};
var uploaderVideoFilter = {title: "video files", extensions: "mp4,avi,rmvb,wma,rm,flash"};
function getUploader(uploader,success,filter) { //這裏定義建立upload實例化函數。接收三個參數，dom元素ID值，成功回調函數，文件過濾
  uploader = new plupload.Uploader({
      browse_button: uploader,// id值
      flash_swf_url: 'lib/plupload-2.1.2/js/Moxie.swf',
      url: uploaderUrl,//上傳路徑通常不會變
      filters: {
          mime_types:filter,  //選擇對應的文件類型
          max_file_size: '10mb', //最大隻能上傳10mb的文件
          prevent_duplicates: true //不容許選取重複文件
      }
  });
  uploader.init();
//圖片選擇完畢觸發
  uploader.bind('FilesAdded',function(uploader,files){
      選取文件後直接上傳
		uploader.start();
  });
//圖片上傳成功觸發，ps:data是返回值（第三個參數是返回值）//success(uploader,files,data)
  uploader.bind('FileUploaded',function (up,files,data) {
      if (data.status == 200) {
          success(url);//成功回調函數 接收圖片回顯的url。個人url是以前生成的文件名，拼接阿里雲文件讀取路徑
      } else {
          layer.msg(data.response);
      }
  });
// 圖片上傳觸發
  uploader.bind('FileUploaded',function(up, err) {
      if (err.code == -600) {
          layer.msg("選擇的文件太大了");
      } else if (err.code == -601) {
          layer.msg( "選擇的文件後綴不對");
      } else if (err.code == -602) {
          layer.msg( "這個文件已經上傳過一遍了");
      }
  });
}
//供應全部頁面調用的函數。接收一個數組。裏面我選的是{id,function,filter}.依次建立
function setUploader(array) {
  for (var i = 0; i < array.length; i++) {
      var obj = array[i];
      getUploader(obj.id,obj.fun,obj.filter);
  }

}

//在頁面中調用通用的方法爲，建立全部的上傳按鈕，封裝對應的參數。傳入通用函數，建立實例化對象
var dom1 = {
	id : "imgShow",// id
	fun : setImgShow, // 預先定義的函數
	filter : [uploaderImageFilter] //全局定義的過濾類型。uploader接收的爲數組
}
var dom2 = {
	id : "updateImgAdd",
	fun : setImgUpdate,
	filter : [uploaderImageFilter]
}
setUploader([dom1,dom2]);