webuploader easyui上传小组件

来源：互联网发布：淘宝店铺入口图编辑：程序博客网时间：2024/05/01 12:57

研究webuploader 一天，网上各种查询，结合easyui，做了如下东东，含MD5验证秒传，没有分块上传，有需要的可以参考参考

jsp页面

<link href="./Content/webuploader/webuploader.css" rel="stylesheet"><script src="./Content/webuploader/webuploader.nolog.min.js" type="text/javascript"></script><script src="./component/fileUpload/upfile.js" type="text/javascript"></script>  <div class="easyui-layout" data-options="fit:true">          <div data-options="region:'center'">            <div class="easyui-panel"  style="height: 27px;" data-options="border:false">                <div  style="float: left;height: 25px;margin-right: 3px;">                    <div  id="chooseFile">选择文件</div>                </div>                <a class="easyui-linkbutton" id="removeUpFile" data-options="iconCls:'icon-remove'" style="height: 27px;width: 100px;" onclick="removeFile();">移除文件</a>                <a class="easyui-linkbutton" id="addUpFile" data-options="iconCls:'icon-add'" style="height: 27px;width: 100px;" onclick="uploadToServer();">开始上传</a>             </div>            <table id="upfileGrid"></table>        </div>  </div>

调用的函数

var upload = $.extend({},upload);/** * 上传组件 * 需要参数 {href:""} 这里controller中返回./component/fileUpload/upFile.jsp页面，主要为了权限控制，就是dilog嵌套的页面 * 可选参数 * callback  :  关闭对话框后的回调函数(只有文件上传成功的情况下执行这个函数) * args.url  :  接收文件上传服务器url,默认上传到TomcatRabbit 服务器 * args.size :  设置单个上传文件大小 * args.agrs :  上传文件附加的参数 */upload.upfile=function(args,callback){    if(!args){        return;    }    //因为在iframe中掉用，为了在页面最前端显示对话框，调用的是父页面的显示对话框的方法    updailog=tim.showParentDilog({        title: '上传文件',        width: 710,        height: 400,        iconCls: 'icon-edit',        //href: './component/fileUpload/upFile.jsp',        href: args.href,        buttons: [{            text: '退出',            iconCls: 'icon-edit',            handler: function () {                  if(parent.getSuccess()){                    if(callback){                        callback();                    }                }                updailog.dialog('close');            }        }],        onLoad: function () {            parent.initUpLoad(args);          }    });};

上传js代码

var upfileGrid;var state = 'pending';var initfilesize=0;var md5value="";var isUpFile=false;//判断是否有文件上传成功，来提示dialog进行下部操作$(function(){    upfileGrid = $("#upfileGrid").datagrid({        fit: true,        fitColumns: true,        rownumbers: true,        nowrap: true,        animate: false,        border: false,        fitColumns:true,        singleSelect: false,        idField: 'fileId',        pagination: false,        columns:[[            { field:'ck',checkbox:true },            { title: 'fileId', field: 'fileId',hidden:true,width:100},            { title: '文件名称',field: 'fileName',width: 230,fixed:true},            { title: '文件大小',field: 'fileSize',width: 80,fixed:true},              { title: '文件验证',field: 'validateMd5',width: 60,fixed:true},              { title: '上传进度',field: 'progress',width: 180,fixed:true,formatter: function (value, rec){                 var htmlstr = '<div class="easyui-progressbar progressbar" style="width: 170px; height: 20px;" value="'+value +'" text="'+value+'%">'+                 '<div class="progressbar-text" style="width: 170px; height: 20px; line-height: 20px;">'+value+'%</div>'+                     '<div class="progressbar-value" style="width: '+value+'%; height: 20px; line-height: 20px;">'+                         '<div class="progressbar-text" style="width: 170px; height: 20px; line-height: 20px;">'+value+'%</div>'+                     '</div>'+                 '</div>';                 return htmlstr;            }},                   { title: '上传状态',field: 'fileState',width: 80,fixed:true},          ]]    });     // 在文件开始发送前做些异步操作。做md5验证     // WebUploader会等待此异步操作完成后，开始发送文件。     WebUploader.Uploader.register({         "before-send-file":"beforeSendFile"     },{         beforeSendFile: function(file){             var task = new $.Deferred();             (new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){                 upfileGrid.datagrid('updateRow',                        {index:upfileGrid.datagrid('getRowIndex',file.id),row:{validateMd5:(percentage * 100).toFixed(2)+"%"}});              }).then(function(val){                    $.ajax({                        type: "POST"                        , url: "./upload/md5Validate.do"                        , data: {                            type: "md5Check",md5: val                        }                        , cache: false                        , timeout: 3000                         , dataType: "json"                    }).then(function(data, textStatus, jqXHR){                        if(data.isHave){   //若存在，这返回失败给WebUploader，表明该文件不需要上传                            task.reject();                            uploader.skipFile(file);                            upfileGrid.datagrid('updateRow',                                    {index:upfileGrid.datagrid('getRowIndex',file.id),row:{fileState:"秒传",progress:100}});                        }else{                            $.extend(uploader.options.formData,{md5:val});                            task.resolve();                        }                    }, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败，都触发重新上传                        task.resolve();                    });              });             return $.when(task);         }     });    uploader = WebUploader.create({        // 不压缩image        resize: false,        // swf文件路径        swf:  './Content/webuploader/Uploader.swf',        // 默认文件接收服务端。        server: './upload/upFileToServer.do',        // 选择文件的按钮。可选。        // 内部根据当前运行是创建，可能是input元素，也可能是flash.        pick: '#chooseFile',        fileSingleSizeLimit:100*1024*1024,//单个文件大小        accept:[{            title: 'file',            extensions: 'doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip',            mimeTypes: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.gif,.jpg,.jpeg,.bmp,.png,.rar,.zip'        }]    });    // 当有文件添加进来的时候    uploader.on( 'fileQueued', function( file ) {        var fileSize = tim.formatFileSize(file.size);        var row =  {fileId:file.id,fileName:file.name,fileSize:fileSize,validateMd5:'0%',progress:0,fileState:"等待上传"};        upfileGrid.datagrid('insertRow', {            index: 0,            row:row        });    });    // 文件上传过程中创建进度条实时显示。    uploader.on( 'uploadProgress', function( file, percentage ) {        upfileGrid.datagrid('updateRow',                {index:upfileGrid.datagrid('getRowIndex',file.id),row:{progress:(percentage * 100).toFixed(2)}});    });    //文件上传成功    uploader.on( 'uploadSuccess', function( file ) {        var rows = upfileGrid.datagrid("getRows");        //上传成功设置checkbox不可用         for (var i = 0; i < rows.length; i++) {             if (rows[i].fileId == file.id ) {                 $("input[type='checkbox']")[i + 1].disabled = true;             }         }         $("#removeUpFile").linkbutton("disable");         upfileGrid.datagrid('updateRow',                {index:upfileGrid.datagrid('getRowIndex',file.id),row:{fileState:'上传成功'}});         isUpFile=true;    });    //文件上传失败    uploader.on( 'uploadError', function( file ) {         upfileGrid.datagrid('updateRow',                {index:upfileGrid.datagrid('getRowIndex',file.id),row:{fileState:'上传失败'}});    });    uploader.on( 'uploadComplete', function( file ) {    });    uploader.on('uploadFinished',function(){//成功后    });    uploader.on('error', function(handler){        if(handler=='F_EXCEED_SIZE'){            tim.parentAlert('error','上传的单个文件不能大于'+initfilesize+'。<br>操作无法进行,如有需求请联系管理员','error');        }else if(handler=='Q_TYPE_DENIED'){            tim.parentAlert('error','不允许上传此类文件!。<br>操作无法进行,如有需求请联系管理员','error');        }    });});//$(function(){})结束/*从队列中移除文件*/function removeFile(fileId){    var fileRows = upfileGrid.datagrid("getSelections");     var copyRows = [];    for ( var j= 0; j < fileRows.length; j++) {        copyRows.push(fileRows[j]);    }    for(var i =0;i<copyRows.length;i++){            var index = upfileGrid.datagrid('getRowIndex',copyRows[i]);        uploader.removeFile(copyRows[i].fileId, true);         upfileGrid.datagrid('deleteRow',index);     }    upfileGrid.datagrid('clearSelections');}function uploadToServer(){    if(uploader.getFiles().length<=0){        tim.parentAlert('提示', '没有上传的文件!', 'error');        return;     }    if ( state === 'uploading' ) {        uploader.stop();    }     else {        uploader.upload();    }}//初始化上传参数function initUpLoad(args){    var opts={};    if(args){        if(args.url!=null&&args.url!=""){            opts.server=args.url;        }        if(args.size!=null&&args.size!=""){            initfilesize=args.size;            opts.fileSingleSizeLimit=args.size;        }        if(args.args!=null&&args.args!=""){            opts.formData=args.args;        }        if(opts){            $.extend(uploader.options,opts);        }    }}function getSuccess(){    return isUpFile;}

1 0