webuploader简单封装

webuploader简单封装如下：

$(function(){  // 初始化Web Uploader      $.fn.extend({          uploaderext:function(data){              var $ = jQuery,              $list = $(data.fileList),//显示文件列表的div ID              uploader = new WebUploader.Uploader({                  auto: true,//选择文件后自动上传                  swf: 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf',                  server: '/xxx/xxx/upload',//上传的后台地址                  pick: data.pickerId,//弹出选择文件的ID                  accept: { //限制上传文件类型(如不需要可去掉)                      title: 'file',                      extensions: data.fileTypeExts,//限制的文件的后缀名                     mimeTypes: data.mimeTypes  //mimeType表，根据后缀名查询出的对应mimeType                  },                  formData: {                        attachmentType: data.filetype  //上传时携带的自定义参数(可去掉)                  }               });              uploader.on( 'fileQueued', function( file ) {//文件添加进来时                  var $li = $(                          "<div id='"+ file.id +"' class=''>" +                              "<div class='fileinfo'>" + file.name                             + "<a href='javascript:var t=$(\"#"+file.id+"\").uploaderext("+file.id+");"                              + "t();'>x</a></div>" +                          "</div>"                          )                  $list.append( $li );              });              uploader.on( 'uploadProgress', function( file, percentage ) {//文件上传时                  var $li = $( '#'+file.id ),                      $percent = $li.find('.progress span');                  // 避免重复创建                  if ( !$percent.length ) {                      $percent = $('<p class="progress"><span></span></p>')                              .appendTo( $li )                              .find('span');                  }                  $percent.css( 'width', percentage * 100 + '%' );              });              // 文件上传成功，给item添加成功class, 用样式标记上传成功。              uploader.on( 'uploadSuccess', function( file,response ) {                  //do something                     $("#"+file.id+" a").attr("dir",response.message); //response为上传成功后服务器返回的对象(如文件id等)                 });              uploader.on( 'uploadError', function( file ) {//上传失败时                  var $li = $( '#'+file.id ),                      $error = $li.find('div.error');                  // 避免重复创建                  if ( !$error.length ) {                      $error = $('<div class="error"></div>').appendTo( $li );                  }                  $error.text('上传失败');              });              uploader.on( 'uploadComplete', function( file ) {//无论成功 失败都会执行的                  $( '#'+file.id ).find('.progress').remove();              });              var deletefile=function(){ //点击x清除文件                  var id=$("#"+data.id+" a").attr("dir")                  //do something                  $('#'+data.id).remove();                  $.ajax({                      url :'/xxx/xxx/delete',                      data : {"id" : id},                      success : function(data) {                                                }                  });              };              return deletefile;          }      })  })  

封装后直接使用jq选择器调用

$("#pdfFilePicker").uploaderext({pickerId:"#pdfFilePicker",fileList:"#pdfFileList",fileTypeExts:"pdf",mimeTypes:"application/pdf",filetype:"research"});$("#videoFilePicker").uploaderext({pickerId:"#videoFilePicker",fileList:"#videoFileList",fileTypeExts:"mp4",mimeTypes:"video/mp4",filetype:"video"});$("#filePicker").uploaderext({pickerId:"#filePicker",fileList:"#fileList",fileTypeExts:"gif,jpg,jpeg,bmp,png,pdf,mp4",mimeTypes:"application/pdf,video/mp4,image/gif,image/jpg,image/jpeg,image/bmp,image/png",filetype:"material"});

pickerId   弹出选择文件的dom元素ID

fileList     上传成功或失败显示文件列表的div ID

fileTypeExts   限制上传文件的后缀名

mimeTypes  mimeType表

filetype    自定义参数(可以去掉)