博客

先去下载webuploader

只需要将下面4个文件添加到工程里面就可以了

<link href="${ctxStatic }/webupload/webuploader.css" type="text/css"
    rel="stylesheet" />
<script type="text/javascript"
    src="${ctxStatic }/webupload/webuploader.nolog.min.js"></script>
<meta name="decorator" content="default" />

<script type="text/javascript">
    $(document).ready(function() {
    
        $("#startOrStopBtn").hide();
        var $list = $('#thelist'),//文件列表  
            $btn = $('#startOrStopBtn'),//开始上传按钮  
            state = 'pending',//初始按钮状态  
            uploader; //uploader对象  
        var fileMd5;  //文件唯一标识 

        var fileName;//文件名称  
        var oldJindu;//如果该文件之前上传过 已经上传的进度是多少  
        var count=0;//当前正在上传的文件在数组中的下标，一次上传多个文件时使用  
        var success=0;//上传成功的文件数  
        var filesArr=new Array();//文件数组：每当有文件被添加进队列的时候 就push到数组中  
        var map={};//key存储文件id，value存储该文件上传过的进度 

        // 监听分块上传过程中的三个时间点  
        WebUploader.Uploader.register({    
            "before-send-file":"beforeSendFile",//整个文件上传前  
            "before-send":"beforeSend",  //每个分片上传前  
            "after-send-file":"afterSendFile",  //分片上传完毕  
        },  
        {    
            //时间点1：所有分块进行上传之前调用此函数    
            beforeSendFile:function(file){
      
                var deferred = WebUploader.Deferred();    
                //1、计算文件的唯一标记fileMd5，用于断点续传  如果.md5File(file)方法里只写一个file参数则计算MD5值会很慢 所以加了后面的参数：10*1024*1024  
                (new WebUploader.Uploader()).md5File(file,0,10*1024*1024).progress(function(percentage){
      
                    $('#'+file.id ).find('p.state').text('正在读取文件信息...');  
                })    
                .then(function(val){
        
                    $('#'+file.id ).find("p.state").text("成功获取文件信息...");    
                    fileMd5=val;    
                    //获取文件信息后进入下一步    
                    deferred.resolve();    
                });    

                fileName=file.name; //为自定义参数文件名赋值  
                return deferred.promise();    
            },    
            //时间点2：如果有分块上传，则每个分块上传之前调用此函数    
            beforeSend:function(block){
      
                var deferred = WebUploader.Deferred();
                $.ajax({    
                    type:"POST",    
                    url:"${ctx}/recorder/data/mergeOrCheckChunks",  //ajax验证每一个分片  
                    data:{    
                        param:"checkChunk",
                        fileName : fileName,  
                        jindutiao:$("#jindutiao").val(),  
                        fileMd5:fileMd5,  //文件唯一标记    
                        chunk:block.chunk,  //当前分块下标    
                        chunkSize:block.end-block.start//当前分块大小    
                    },    
                    cache: false,  
                    async: false,  // 同步  
                    timeout: 1000, //todo 超时的话，只能认为该分片未上传过  
                    //dataType:"json",    
                    success:function(response){
        
                        var res = eval('('+response+')');
                        if(res.ifExist){  
                            //分块存在，跳过    
                            deferred.reject();    
                        }else{    
                            //分块不存在或不完整，重新发送该分块内容    
                            deferred.resolve();    
                        }    
                    }    
                });    

                this.owner.options.formData.fileMd5 = fileMd5;    
                deferred.resolve();    
                return deferred.promise();    
            },    
            //时间点3：所有分块上传成功后调用此函数    
            afterSendFile:function(){
      
                //如果分块上传成功，则通知后台合并分块    
                $.ajax({    
                    type:"POST",    
                    url:"${ctx}/recorder/data/mergeOrCheckChunks",  //ajax将所有片段合并成整体  
                    data:{    
                        param:"mergeChunks",
                        fileName : fileName,  
                        fileMd5:fileMd5
                    },    
                    success:function(data){
      
                        count++; //每上传完成一个文件 count+1  
                        if(count<=filesArr.length-1){  
                            uploader.upload(filesArr[count].id);//上传文件列表中的下一个文件  
                        }  
                         //合并成功之后的操作  
                    }    
                });    
            }    
        });  

        uploader = WebUploader.create({
            auto : false, //是否自动上传
            pick : {
                id : '#picker',
                label : '选择文件',
                multiple:false 
            },
            duplicate : false, //同一文件是否可重复选择
            prepareNextFile: true,
            // 不压缩image
            resize: false,
            accept : {
                title : 'ZIP',
                extensions : 'zip',
                mimeTypes : 'application/x-compressed,application/x-zip-compressed,application/zip,multipart/x-zip'
            },
            compress : null,//图片不压缩
            chunked : true, //分片
            chunkSize : 10 * 1024 * 1024, //每片10M
            chunkRetry : 3,//如果失败，则不重试
            threads : 3,//上传并发数。允许同时最大上传进程数。
            fileNumLimit : 10,//验证文件总数量, 超出则不允许加入队列
            fileSizeLimit:6*1024*1024*1024,