浏览器&前端

js对webuploader的封装

字号+ 作者:风潇潇 来源:原创 2016-02-25 14:36 我要评论( )

这几天练习一下前端,感觉还不错的

效果图是这样:

这次是对Webuploader的封装,使用的jquery的扩展封装的,不多说,上代码

   //create by xiaohua 2015 13:02    
$.createUploader=function(opt){
        var $ = jQuery,
        state = 'pending',
        uploader,
        fileNum=0,
        percent=0,
        fileIndex=0,
      BASE_URL = '/webuploader';
        
     var opt=$.extend({  //设置默认参数
            resize: true,
            auto: true,
            swf: BASE_URL + '/js/Uploader.swf',
            contextPath:"/dsis",
            uploaderPath:"/sys/attach/upload",
            accepts: [{
                title : 'Images',
                extensions : 'gif,jpg,jpeg,bmp,png',
                mimeTypes : 'image/*'
            },{
                title : 'zip',
                extensions : 'zip',
                mimeTypes : 'application/zip'
            },{
                title : 'word doc',
                extensions : 'pptx,ppt',
                mimeTypes : 'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            },{
                title : 'powerpoint doc',
                extensions : 'pptx,ppt',
                mimeTypes : 'application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation'
            },{
                title : 'excel doc',
                extensions : 'xlsx,xls',
                mimeTypes : 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }],
            fileNumLimit: 8,
        fileSizeLimit: 16 * 1024 * 1024,    // 16 M
        fileSingleSizeLimit: 2 * 1024 * 1024,    // 2 M
        picker:'picker',
        uploaderProgressar:'uploader-progress-bar',
      chunked:false,
      chunkSize:5242880,
      threads:1,
      fileVal:'file',
      chunkRetry:3
       },opt||{});  

    if($("#"+opt.picker).length<=0) {//必须有上传按钮
            throw new Error("upload picker is not correct!");
        }

    uploader = WebUploader.create({ //创建uploader对象
        resize: opt.resize,
        chunked:opt.chunked,
        chunkSize:opt.chunSize,
        threads:opt.threads,
        fileVal:opt.fileVal,
        chunkRetry:opt.chunkRetry,
        auto: opt.auto,
        swf: BASE_URL + '/js/Uploader.swf',
        server: opt.contextPath+opt.uploadPath,
        pick: '#'+opt.picker,
        accept: opt.accepts,
        fileNumLimit: opt.fileNumlimit,
                fileSizeLimit: opt.fileSizeLimit,    // 16 M
                fileSingleSizeLimit: opt.fileSingleSizeLimit    // 2 M
    });

    uploader.on('fileQueued', function(file) {
                fileNum++;
                fileIndex++;
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        fileIndex--;
        if($("#"+opt.uploaderProgressar).length>0){
            $percent = $("#"+opt.uploaderProgressar);
            percent=percentage * 100 / fileNum+percent;
            $percent.css( 'width', percent + '%' );
            $percent.find('span').text(percent+ '%' +' 完成');
         }
        if(fileIndex <= 0){
            fileNum=0;
            percent=0;
        }
    });


    uploader.on( 'uploadSuccess', function( file,response ) { //上传成功
         if(opt.uploadSuccess){
             var isDelete = false;
             isDelete=opt.uploadSuccess(file,response);
                 if (isDelete) {
                         uploader.removeFile(file);
                 }
         }
    });

    uploader.on( 'uploadError', function( file ) { //上传错误
    if(opt.uploadError){
            opt.uploadError(file);
         }
    });



    uploader.on( 'uploadComplete', function(file) { //上传完成
        /*
        inited 初始状态
        queued 已经进入队列, 等待上传
        progress 上传中
        complete 上传完成。
        error 上传出错,可重试
        interrupt 上传中断,可续传。
        invalid 文件不合格,不能重试上传。会自动从队列中移除。
        cancelled 文件被移除。
        */
        if(opt.uploadComplete){
                opt.uploadComplete(file);
         }
    });

/*
当validate不通过时,会以派送错误事件的形式通知调用者。通过upload.on('error', handler)可以捕获到此类错误,目前有以下错误会在特定的情况下派送错来。

Q_EXCEED_NUM_LIMIT 在设置了fileNumLimit且尝试给uploader添加的文件数量超出这个值时派送。
Q_EXCEED_SIZE_LIMIT 在设置了Q_EXCEED_SIZE_LIMIT且尝试给uploader添加的文件总大小超出这个值时派送。
Q_TYPE_DENIED 当文件类型不满足时触发。。

*/
 uploader.onError = function( code ) {
    //typeof(eval(funcName)) == "function"
        if(opt.validateError){
             validateError(code);
        }
    };

    uploader.on( 'all', function( type ) {
        if ( type === 'startUpload' ) {
            state = 'uploading';
        } else if ( type === 'stopUpload' ) {
            state = 'paused';
        } else if ( type === 'uploadFinished' ) {
            state = 'done';
        }
    });
            return uploader;
    };


下面看一下调用方式,里面用到什么东西,可以看代码

        <!--[if lt IE 9]>
        <script src="${base.contextPath}/resources/css/attach/html5shiv.js"></script>
        <script src="${base.contextPath}/resources/css/attach/respond.min.js"></script>
            <![endif]-->
        <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="${base.contextPath}/resources/css/attach/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${base.contextPath}/resources/css/attach/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="${base.contextPath}/resources/css/attach/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="${base.contextPath}/resources/css/attach/webuploader.css">
    <script type="text/javascript" src="${base.contextPath}/resources/js/attach/bootstrap.js"></script>
    <script type="text/javascript" src="${base.contextPath}/resources/js/attach/global.js"></script>
    <script type="text/javascript" src="${base.contextPath}/resources/js/attach/webuploader.js"></script>
    <script type="text/javascript" src="${base.contextPath}/resources/js/attach/common.js"></script>
    <script type="text/javascript" src="${base.contextPath}/resources/js/attach/jquery-webuploader.js"></script>
        
        <input type="hidden" id="contextPath" name="contextPath" value="${base.contextPath}">
    <div id="uploader">
        <div class="btns">
            <div id="picker">选择文件</div>
        </div>
    </div>
    <div class="progress">
        <div id="uploader-progress-bar" class="progress-bar" role="progressbar"
            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
            style="width: 0%;">
            <span>0% 完成</span>
        </div>
    </div>
    <script type="text/javascript">
    jQuery(function() {
        //设置文件上传参数
        var opts={
                contextPath:"http://localhost:8080/dsis",//项目上下文
                uploadPath:'/sys/attach/upload',//上传路径
                accepts:[{//可接受的文件
                    title : 'Images',
                    extensions : 'gif,jpg,jpeg,bmp,png',
                    mimeTypes : 'image/*'
                }],
                fileNumlimit:8,// 队列中文件个数
                fileSizeLimit: 16 * 1024 * 1024,    // 队列中总文件大小
                fileSingleSizeLimit: 2 * 1024 * 1024,    // 2 M
                picker:'picker',//上传按钮
                uploaderProgressar:'uploader-progress-bar',//进度调显示,注意是bootstrap 的进度调
                uploadSuccess:function(file,response){//上传完成,情况:可能会错误,可能会成功
                    console.log(response);
                    var isDelete=false;
                    if (file.getStatus() == 'complete') {//上传完成
                        if(response.message == 'UPLOAD_SUCCESS'){//上传成功
                            file.setStatus('success');
                            isDelete = uploadComplete(response.message, file, response);
                        }else{//上传失败,服务端返回数据
                            file.setStatus(response.info);
                            isDelete = uploadComplete(response.message, file, response);
                        }
                    } else {
                        isDelete = uploadComplete(file.getStatus(), file, null);//服务端没有数据
                    }
                    //isDelete为true,则从uploader队列中删除,可以再次点击上传
                    return isDelete;
                },
                //验证出错
                validateError:function(status){
                    validateError(status);
                }
        };
        
        //创建上传对象
             var uploader = $.createUploader(opts);
          uploader.option('formData',{
                 sourceType:$("#file_upload_sourceType").val(),
                 sourceKey:$("#file_upload_sourceKey").val()
             });
    });
    
    </script>
    

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)