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

转载于:https://my.oschina.net/u/3614139/blog/3067045