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]);