webuploader.js上传图片、视频、附件

根据需求 修改了webuploader.js中的部分源代码

!(function(){
    var currentDate = new Date();
      GUID = currentDate.getHours() 
          + "" +currentDate.getMinutes()
          + "" +currentDate.getSeconds()
          + "" +currentDate.getMilliseconds();
//上传图片
  $.extend({
    uploadPicture:function(obj){
      // 初始化Web Uploader
      var uploader = WebUploader.create({
          // 选完文件后，是否自动上传。
          auto: true,
          method:'POST',
          fileNumLimit:obj.fileNumLimit,//验证文件总数量, 超出则不允许加入队列
          fileSingleSizeLimit:obj.fileSingleSizeLimit ,//5*1024*1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
          // swf文件路径
          swf: 'Uploader.swf',
          // 文件接收服务端。
          server: obj.server,//'/page/page.json',
          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick: obj.pick,//'#filePicker',
          // 只允许选择图片文件。
          accept: obj.accept,
          thumb:{
            width: 110,
            height: 110,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: true,
            // 是否允许裁剪。
            crop: true,
            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            type: ''//'image/jpeg'
          },
          duplicate:true,
          compress:false,
          resize:obj.resize||false // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
      });
      //由于每次点击弹出框时，原有的按钮都会变大，在此处新初始化一个按钮覆盖掉原有的按钮
      uploader.addButton({
            id: '#addPictureButton',
            innerHTML: '+'
        });
      var i = $("#pictureList .info").length;
      $(".ui-dialog-title").html("上传图片  ("+i+"/12)");
      // 当有文件添加进来的时候
      uploader.on( 'fileQueued', function( file ) {
        //图片数目限制为12张
          if($('.file-item').length<12){
              //创建新添加图片和删除条
              var $li = $(
                      '<div id="' + file.id + '" class="file-item thumbnail">' +
                          '<img>' +'<span class="delBtn">x</span>'+
                          '<div class="info"></div>'+
                          '<input class="imgPath"  type="hidden">'+
                      '</div>'
                      ),
                  $info = $li.find('.info'),
                  $img = $li.find('img');
              //删除图片          
              var $del= $li.find('.delBtn');
              $del.click(function() {
                var i = $("#pictureList .info").length-1;
                $(".ui-dialog-title").html("上传图片  ("+i--+"/12)");
                $(this).fadeOut("normal",function(){
                $(this).parents('div.file-item').remove();
                 uploader.removeFile( file );
            })
        });
              
          }
        //将新添加图片放入缩略图容器
          $('#pictureList').append( $li );
        //为图片删除条添加单击删除事件
          $info.on('click', function () {
              //将图片移除上传序列
              uploader.removeFile(file, true);
              //将图片从缩略图容器删除
              var $li = $('#' + file.id);
              $li.off().remove();
              $('#filePicker').children().css('display','');
              if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
                $('#filePicker').css('background', 'url("images/chooseImg_qyfc.png") 0 0 no-repeat');
              } else {
                $('#filePicker').css('background', 'url("images/chooseImg_grzp.png") 0 0 no-repeat');
              }
            });
          
          // 创建缩略图
          // 如果为非图片文件，可以不用调用此方法。
          // thumbnailWidth x thumbnailHeight 为 100 x 100
          var thumbnailWidth = 100,
              thumbnailHeight=100;
          uploader.makeThumb( file, function( error, src ) {
              if ( error ) {
                  $img.replaceWith('<span>不能预览</span>');
                  return;
              }

              $img.attr( 'src', src );
          }, thumbnailWidth, thumbnailHeight );
      });


      // 文件上传过程中创建进度条实时显示。
      uploader.on( 'uploadProgress', function( file, percentage ) {
          var $li = $( '#'+file.id ),
              $percent = $li.find('.progress .progress-bar');
              $info = $li.find('.info');

          // 避免重复创建
          if ( !$percent.length ) {
              $percent = $('<div class="progress"><div id="progress-bar" class="progress-bar progress-info"></span></div>')
                      .appendTo( $li )
                      .find('.progress-bar');
          }
          $info.css({display: 'none'});
          $percent.css( 'width', percentage * 100 + '%' );
      });
      
      // 文件上传成功，给item添加成功class, 用样式标记上传成功。
      uploader.on( 'uploadSuccess', function( file ,response) {
         
          var $li = $('#' + file.id), $info = $li.find('.info');
          for(var i=0;i<$("#pictureList .info").length+1;i++){
              $(".ui-dialog-title").html("上传图片  ("+i+"/12)");
          } 
          var $input = $li.find('.imgPath');
          $li.off();
          $info.off().text('上传成功!').css({color: 'green', display: 'block',textAlign:'center',paddingTop:'10px'});
          $input.off().val(response.imgPath);
          if(obj.success){
              obj.success.call(this,file,response);
              return ;
          }
          //$( '#'+file.id ).addClass('upload-state-done');
          $('input[name="'+obj.inputName+'"]').val(response.imgPath);
          console.log(response.webUrl);
          $("#logourl").val(response.webUrl);
          $( '#'+file.id ).addClass('upload-state-done');
         

      });
//      // 文件上传失败，显示上传出错。
//      uploader.on( 'uploadError', function( file ) {
//        var $li = $('#' + file.id),
//          $info = $li.find('.info');
//          $info.off().text('上传失败!').css({color: 'red', display: 'block'});
//      });
   // 文件上传失败，显示上传出错。
      uploader.on( 'error', function( type,handler ) {
          if(!we.utils.isEmpty(obj.error)){
              obj.error.call(this,type,handler);
          }
          
          var message="文件上传失败";
            if(type=="Q_TYPE_DENIED"){
                message="只允许上传"+obj.accept.extensions+"格式的文件 "
            }else if(type=="F_EXCEED_SIZE"){
                message="文件大小不允许超过"+WebUploader.Base.formatSize( obj.fileSingleSizeLimit )
            }else if (type == "Q_EXCEED_NUM_LIMIT"){
                message="最多只允许上传" + obj.fileNumLimit + "张图片！";
            }else if (type=="F_DUPLICATE"){
                return ;
            }
            $dialog.alert({
                type:'warning',
                title:'温馨提示',
                content:message
            });
      });
      // 完成上传完了，成功或者失败，先删除进度条。
      uploader.on( 'uploadComplete', function( file ) {
          $( '#'+file.id ).find('.progress').remove();
          var $li = $('#' + file.id);
          //上传完如果删除图片          
          var $del= $li.find('.delBtn');
          $del.click(function() {
                    var i = $(".info").length-1; 
                    $(".ui-dialog-title").html("上传图片  ("+i--+"/12)");
                    $(this).fadeOut("normal",function(){
                    $(this).parents('div.file-item').remove();
                     uploader.removeFile( file );
                })
            });
      });
      
      if(obj.destroy==true){
        uploader.destroy();
      }
    }
  })   
$.extend({
    uploadVideo:function(obj){
          // 初始化Web Uploader
          var uploader = WebUploader.create({
              // 选完文件后，是否自动上传。
              auto: true,
              method:'POST',
              dnd:obj.dnd,
              fileNumLimit:obj.fileNumLimit,//验证文件总数量, 超出则不允许加入队列
              fileSingleSizeLimit:obj.fileSingleSizeLimit *1024*1024,//5*1024*1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
              // swf文件路径
              swf: 'Uploader.swf',
              // 文件接收服务端。
              server: obj.server,//'/page/page.json',
              pick : {id : obj.pick,
                  //只能选择一个文件上传
                  multiple: obj.multiple || false},
              //限制只能上传一个文件
              // 只允许选择图片文件。
              accept: {
                    title: 'doc',
                    extensions: obj.accept
                    },
              threads: 1,
              duplicate:true,
              chunked: true,
              chunkSize: 1024 * 1024,
              formData : {guid : GUID} ,
              resize:obj.resize||false // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
          });
          
        //由于每次点击弹出框时，原有的按钮都会变大，在此处新初始化一个按钮覆盖掉原有的按钮
           uploader.addButton({
                id: '#addVideoButton',
                innerHTML: '上传视频'
            });

          // 当有文件添加进来的时候
          uploader.on( 'fileQueued', function( file ) {
              
              $( '#videoList').find('.error').remove();
              var $div = $(
                      '<div id="' + file.id + '" class="item">' +
                         '<div class="info">' + file.name + '<span class="delVideoBtn">删除</span>'+'</div>' +
                         '<input class="videoPath"  type="hidden">'+
                      '</div>'
                );
             
                $('#videoList').append( $div );
                var $li = $('#' + file.id);
                //中途删除视频          
                 var $del= $li.find('.delVideoBtn');
                  $del.show();
                  $del.click(function() {
                    //重置队列                
                      uploader.reset();
                      $(this).fadeOut("normal",function(){
                        $(this).parents('div.item').remove();
                      })
                      $('#addVideoButton').show();
                      $('#addVideoButton .webuploader-pick').text('上传视频');
                      $('#videoList').css("background","url(/static/modules/common/images/upvideo.png)100px 80px no-repeat");
                    });
          });


          // 文件上传过程中创建进度条实时显示。
          uploader.on( 'uploadProgress', function( file, percentage ) {
              $('#addVideoButton .webuploader-pick').text('上传中...');
              var $li = $( '#'+file.id ),
                  $percent = $li.find('.progress .progress-bar');

              // 避免重复创建
              if ( !$percent.length ) {
                  $percent = $('<div class="progress"><div id="progress-bar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div></div>')
                          .appendTo( $li )
                          .find('.progress-bar');
              }

              $percent.css( 'width', percentage * 100 + '%' );
          });

          // 文件上传成功，给item添加成功class, 用样式标记上传成功。
          uploader.on( 'uploadSuccess', function( file ,response) {
              $('#videoList').css("background","url(/static/modules/common/images/example.jpg)4px 45px no-repeat")
              $('#addVideoButton').hide();
              var $li = $('#' + file.id);
              var $input = $li.find('.videoPath');
              $input.off().val(response.filePath);
              if(obj.success){
                  obj.success.call(this,file,response);
                  $( '#'+file.id ).addClass('upload-state-done');
                  return ;
              }
             
          });

          // 文件上传失败，显示上传出错。
          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("error",function (type){ 
                console.log(type);
                var $li = $( '#videoList'),$error = $li.find('div.error');
                
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }
      
               if(type == "F_DUPLICATE"){
                   $error.text("请不要重复选择文件！");
               }else if(type == "F_EXCEED_SIZE"){
                   $error.text("附件大小不可超过" + obj.fileSingleSizeLimit + "M!");
               }else if(type == "Q_TYPE_DENIED"){
                   $error.text("请上传格式为" + obj.msgs + "的附件！");
               }else if (type == "Q_EXCEED_NUM_LIMIT"){
                   $error.text("最多只允许上传" + obj.fileNumLimit + "个视频！");
               }
           });
          
          // 完成上传完了，成功或者失败，先删除进度条。
          uploader.on( 'uploadComplete', function( file ) {
              $( '#'+file.id ).find('.progress').remove();
          });
        }
      })

$.extend({
    uploadFile:function(obj){
      // 初始化Web Uploader
      var uploader = WebUploader.create({
          // 选完文件后，是否自动上传。
          auto: true,
          method:'POST',
          dnd:obj.dnd,
          fileNumLimit:obj.fileNumLimit,//验证文件总数量, 超出则不允许加入队列
          fileSingleSizeLimit:obj.fileSingleSizeLimit *1024*1024,//5*1024*1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
          // swf文件路径
          swf: 'Uploader.swf',
          // 文件接收服务端。
          server: obj.server,//'/page/page.json',
          pick : {id : obj.pick,
              //只能选择一个文件上传
              multiple: obj.multiple || false},
          //限制只能上传一个文件
          // 只允许选择图片文件。
          accept: {
                title: 'doc',
                extensions: obj.accept
                },
          threads: 1,
          duplicate:true,
          chunked: true,
          chunkSize: 1024 * 1024,
          formData : {guid : GUID} ,
          resize:obj.resize||false // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
      });
      
    //由于每次点击弹出框时，原有的按钮都会变大，在此处新初始化一个按钮覆盖掉原有的按钮
        uploader.addButton({
            id: '#addFileButton',
            innerHTML: '上传附件'
        });
     
       var i = $("#fileList .info").length;
      $(".ui-dialog-title").html("上传附件 ("+i+"/3)");
      // 当有文件添加进来的时候
      uploader.on( 'fileQueued', function( file ) {
          $( '#fileList').find('.error').remove();
          var $div = $(
                  '<div id="' + file.id + '" class="item" style="background:#eee;padding:5px 10px;margin-top:15px">' +
                     '<div class="info">' + file.name + '<span class="delFileBtn">删除</span>'+'</div>' +
                     '<input class="filePath"  type="hidden">'+
                  '</div>'
            );
          $('#fileList').append( $div );
          //中途删除文件       
          var $li = $('#' + file.id);
          var $del= $li.find('.delFileBtn');
          $del.show();
          $del.click(function() {
              if(!$('#fileList').val()){
                  $('#fileList').css("background","url(/static/modules/common/images/upfile.png)154px 80px no-repeat");
              }
                $(this).fadeOut("normal",function(){
                    $(this).parents('div.item').remove();
                     uploader.removeFile( file );
                })
            });
           
      });


      // 文件上传过程中创建进度条实时显示。
      uploader.on( 'uploadProgress', function( file, percentage ) {
          
          var $li = $( '#'+file.id ),
              $percent = $li.find('.progress .progress-bar');

          // 避免重复创建
          if ( !$percent.length ) {
              $percent = $('<div class="progress"><div id="progress-bar" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div></div>')
                      .appendTo( $li )
                      .find('.progress-bar');
          }

          $percent.css( 'width', percentage * 100 + '%' );
      });

      // 文件上传成功，给item添加成功class, 用样式标记上传成功。
      uploader.on( 'uploadSuccess', function( file ,response) {
          $('#fileList').css("background","");
          for(var i=0;i<$("#fileList .info").length+1;i++){
              $(".ui-dialog-title").html("上传附件  ("+i+"/3)");
          } 
          var $li = $('#' + file.id);
          var $input = $li.find('.filePath');
          $input.off().val(response.filePath);
          if(obj.success){
              obj.success.call(this,file,response);
              $( '#'+file.id ).addClass('upload-state-done');
              //上传完删除文件          
              var $del= $li.find('.delFileBtn');
              $del.show();
              $del.click(function() {
                  if($('#fileList').val()==""){
                      $('#fileList').css("background","url(/static/modules/common/images/upfile.png)154px 80px no-repeat");
                  }
                  var i = $("#fileList .info").length-1; 
                  $(".ui-dialog-title").html("上传附件 ("+i--+"/3)");
                    $(this).fadeOut("normal",function(){
                        $(this).parents('div.item').remove();
                         uploader.removeFile( file );
                    })
                });
              return ;
          }
        
      });

      // 文件上传失败，显示上传出错。
      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("error",function (type){ 
            console.log(type);
            var $li = $( '#fileList'),$error = $li.find('div.error');
            
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }
  
           if(type == "F_DUPLICATE"){
               $error.text("请不要重复选择文件！");
           }else if(type == "F_EXCEED_SIZE"){
               $error.text("附件大小不可超过" + obj.fileSingleSizeLimit + "M!");
           }else if(type == "Q_TYPE_DENIED"){
               $error.text("请上传格式为" + obj.msgs + "的附件！");
           }else if (type == "Q_EXCEED_NUM_LIMIT"){
               $error.text("最多只允许上传" + obj.fileNumLimit + "个附件！");
           }
       });
      
      // 完成上传完了，成功或者失败，先删除进度条。
      uploader.on( 'uploadComplete', function( file ) {
          $( '#'+file.id ).find('.progress').remove();
      });  
    }
  })
})();

对应上传图片的js如下

 /*上传图片弹框*/
        $('#pictureButton').live("click",function(){
            /*判断是否已经上传了视频*/
          if($('#videoUrl').val()==""){
            var $d = $dialog.dialog({
                  id:'dialogPicture',
                  title:'上传图片(0/12)',
                  content:$('#addPicture'),
                  width:700,
                  onshow:function(){
                    //图片上传
                    $.uploadPicture({
                        server:'/file/uploadImage.html',
                        pick:'#addPictureButton',
                        multiple:false,
                        fileSingleSizeLimit:5*1024*1024,
                        fileNumLimit:12,
                        accept:{
                            title: 'Images',
                            extensions: 'gif,jpg,jpeg,bmp,png',
                            mimeTypes: 'image/jpg,image/jpeg,image/png*'
                        },
                        success:function(file ,data){
                            
                        }
                    });
                  },
                  okValue:'确定',
                  ok:function(){
                      //获得所有class为imgPath输入域中的value
                      $("input[class=imgPath]").each(function(){
                          pictureUrl += $(this).val()+";";
                      })
                      $("#pictureUrl").val(pictureUrl);
                      this.title('提交中…');
                      setTimeout(function () {
                          $d.close().remove();
                      }, 1000);
                  },
                  cancelValue:'取消',
                  cancel:function(){

                  },
                  onclose:function(){
                      
                  }
              });
          }else{
                $dialog.confirm({
                    title:'温馨提示',
                    width:'350',
                    content:'图片和视频不可以同时上传，确认要放弃上传视频吗？',
                    okValue:'确认',
                    ok:function(){
                        $('#videoUrl').val("");
                        var $d = $dialog.dialog({
                              id:'dialogPicture',
                              title:'上传图片(0/12)',
                              content:$('#addPicture'),
                              width:700,
                              onshow:function(){
                                //图片上传
                                $.uploadPicture({
                                    server:'/file/uploadImage.html',
                                    pick:'#addPictureButton',
                                    multiple:false,
                                    fileSingleSizeLimit:5*1024*1024,
                                    fileNumLimit:12,
                                    accept:{
                                        title: 'Images',
                                        extensions: 'gif,jpg,jpeg,bmp,png',
                                        mimeTypes: 'image/jpg,image/jpeg,image/png*'
                                    },
                                    success:function(file ,data){
                                        
                                    }
                                });
                              },
                              okValue:'确定',
                              ok:function(){
                                  //获得所有class为imgPath输入域中的value
                                  $("input[class=imgPath]").each(function(){
                                      pictureUrl += $(this).val()+";";
                                  })
                                  $("#pictureUrl").val(pictureUrl);
                                  this.title('提交中…');
                                  setTimeout(function () {
                                      $d.close().remove();
                                  }, 1000);
                              },
                              cancelValue:'取消',
                              cancel:function(){

                              },
                              onclose:function(){
                                  
                              }
                          });
                    },
                    cancelValue:'取消',
                    cancel:function(){
                        $('#pictureUrl').val("");
                    }
                });
          }
        });
    

对应上传视频的js如下

  /*上传视频弹框*/
        $('#videoButton').live("click",function(){
            //判断是否已经上传了图片
         if($('#pictureUrl').val()==""){
            var $d = $dialog.dialog({
                  id:'dialogVideo',
                  title:'上传视频',
                  content:$('#addVideo'),
                  width:500,
                  onshow:function(){
                    //视频上传
                    $.uploadVideo({
                        server:'/attachment/uploadVideo.html',
                        pick:'#addVideoButton',
                        accept:'mp4,MP4,webm',
                        msgs:"mp4,webm",
                        multiple:false,
                        fileSingleSizeLimit:600,
                        fileNumLimit:1,
                        success:function(file ,data){
                            
                        }
                    });
                  },
                  okValue:'确定',
                  ok:function(){
                    //获得所有class为videoPath输入域中的value
                      $("input[class=videoPath]").each(function(){
                          videoUrl += $(this).val();
                      })
                      $('input[name="videoUrl"]').val(videoUrl);
                      this.title('提交中…');
                      setTimeout(function () {
                          $d.close().remove();
                      }, 1000);
                  },
                  cancelValue:'取消',
                  cancel:function(){
                      
                  },
                  onclose:function(){
                      
                  }
              });
         }else{
             $('#videoButton').live("click",function(){
                    $dialog.confirm({
                        title:'温馨提示',
                        width:'350',
                        content:'图片和视频不可以同时上传，确认要放弃上传图片吗？',
                        okValue:'确认',
                        ok:function(){
                            $('#pictureUrl').val("");
                            var $d = $dialog.dialog({
                                  id:'dialogVideo',
                                  title:'上传视频',
                                  content:$('#addVideo'),
                                  width:500,
                                  onshow:function(){
                                    //视频上传
                                    $.uploadVideo({
                                        server:'/attachment/uploadVideo.html',
                                        pick:'#addVideoButton',
                                        accept:'mp4,MP4,webm',
                                        msgs:"mp4,webm",
                                        multiple:false,
                                        fileSingleSizeLimit:600,
                                        fileNumLimit:1,
                                        success:function(file ,data){
                                            
                                        }
                                    });
                                  },
                                  okValue:'确定',
                                  ok:function(){
                                    //获得所有class为videoPath输入域中的value
                                      $("input[class=videoPath]").each(function(){
                                          videoUrl += $(this).val();
                                      })
                                      $('input[name="videoUrl"]').val(videoUrl);
                                      this.title('提交中…');
                                      setTimeout(function () {
                                          $d.close().remove();
                                      }, 1000);
                                  },
                                  cancelValue:'取消',
                                  cancel:function(){
                                      
                                  },
                                  onclose:function(){
                                      
                                  }
                              });
                        }
                  });
             });
         }
        });

对应上传附件的js如下

/*添加附件弹出框*/
    $('#fileButton').live("click",function(){
        var $d = $dialog.dialog({
              id:'dialogFile',
              title:'上传附件 (0/3)',
              content:$('#addFile'),
              width:500,
              onshow:function(){
                /*附件上传*/
                $.uploadFile({
                    server:'/attachment/uploadDoc.html',
                    pick:'#addFileButton',
                    accept:'txt,xls,xlsx,doc,docx,ppt,pptx,pdf,rar,zip',
                    msgs:'txt,xls,xlsx,doc,docx,ppt,pptx,pdf,rar,zip',
                    multiple:false,
                    fileSingleSizeLimit:200,
                    fileNumLimit:3,
                    success:function(file ,data){
                    }
                });
              },
              okValue:'确定',
              ok:function(){
                //获得所有class为imgPath输入域中的value
                  $("input[class=filePath]").each(function(){
                      fileUrl += $(this).val()+";";
                  })
                  $('input[name="fileUrl"]').val(fileUrl);
                  this.title('提交中…');
                  setTimeout(function () {
                      $d.close().remove();
                  }, 1000);
              },
              cancelValue:'取消',
              cancel:function(){
                  
              },
              onclose:function(){
                  
              }
          });
    });