jquery 原生控件超大文件分片校验上传易迁移 webuploader springboot_jq webuploader分块上传前校验文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42749765/article/details/111588912

该博客介绍了如何使用WebUploader前端库结合SpringBoot后端，实现超大文件的分片上传、校验及暂停功能。详细讲解了页面结构、前后端思路及关键代码，包括动态加载资源、分块上传和验证的实现。并提供了相关接口的更新说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

启动控件选择文件

上传中暂停

上传成功

页面包结构

后台三给类

思路介绍

1.页面进行采用webuploader 实现

2.后台进行分块上传和分块校验

3.后台进行检查每一个块是否上传

4.最后进行整合到一起

5.整合后找地方放到一个新位置

6.保存后记录地址到数据库一份

前段代码

动态加载js、css 方法

/**
 * 动态加载js or css
 * test dome 
 *  loadjscssfile("/index/lib/webuploader-0.1.5/webuploader.css","css");
    loadjscssfile("/index/lib/webuploader-0.1.5/webuploader.js","js");
 * 
 * @param {*} filename 文件地址名称
 * @param {*} filetype 文件类型 js or css
 */
function loadjscssfile(filename,filetype){
    if(location.port=="5500"){//开发环境加上lspt
        filename = location.origin+"/lspt/"+filename;
    }else{
        filename = location.origin+filename;
    }
    if(filetype == "js"){
        var fileref = document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src",filename);
    }else if(filetype == "css"){
    
        var fileref = document.createElement('link');
        fileref.setAttribute("rel","stylesheet");
        fileref.setAttribute("type","text/css");
        fileref.setAttribute("href",filename);
    }
   if(typeof fileref != "undefined"){
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    
}

介绍

1.用这玩意的目的是，加载当前包加载js和css 都在js中，就不再页面写再多东西了

核心加载上传文件js包

/**
 * 初始化超大文件分块上传服务
 * 1.需要加载jquery 
 * 2.加载serverData.js 公共服务
 * 调用方法 
    function start() {
		//1.更新设置回调方法
		webUploaderUitl.superCallback=function(data){
			alert(data.state);
		};
		//2.打开输入框
		webUploaderUitl.openWebUploaderPopup();
	}
 * 
 */
var webUploaderUitl = {
    /**
     * 1.打开超大文件上传输入框
     */
    openWebUploaderPopup:function(){
        
        //第一次渲染页面加载js执行
        if($("#uploader").length>0){ 
            $("#uploader").show();
            $(".bjyy").show();
        }else{
            //初始化添加框页面到页面位置
            webUploaderUitl.addHtmlService();
            //加载操作事件
            webUploaderUitl.addUploadService();

            $("#clearUploaderPopup").click(function(){
                $("#uploader").hide();
                $(".bjyy").hide();
                $("#thelist").empty();
            });
        }
         $("#thelist").empty();//每次打开清空上传列表
        $("#picker").css("display","block");//初始化打开选择文件按钮
       
       
    },
    /**
     * 2.超级回调
     * 每次调用进行更新回调方法
     * @param {*} data 
     */
    superCallback:function(data){
        console.log(data);
    },
   
    /**
     * 加载上传文件弹出框
     * 
     */
    addHtmlService: function () {
        var htmlStr = '';
        htmlStr += '<div class="bjyy"></div>';
        htmlStr += '<div id="uploader" class="wu-example" >'
                        +'<div class="uploaderTitle">'
                            +'<label>上传文件</label>'
                            +' <span id="clearUploaderPopup">X</span>'
                        +'</div>'
                        +'<div id="thelist" class="uploader-list"></div>'
                        +'<div class="btns">'
                            +'<div id="picker">选择文件</div>'
                            +'<button id="btn" class="btn btn-default">继续上传</button>'
                        +'</div>'
                    +'</div>';
           $("body").append(htmlStr);

    },
    /**
     * 加载超大文件上传js
     * 绑定事件
     * 
     * 
     */
    addUploadService: function () {
        var hosturl = SuperMaxFileUploadServerUrl;//后端服务器地址，平常放到共共包里
        var hoken = getCookie("bqadrstoken");//

        var fileMd5;
        var $list = $("#thelist");
        var state = 'pending';//初始按钮状态
        var $btn = $("#btn");

        $list.empty();//每次打开清空上传列表
        $("#picker").css("display","block");//初始化打开选择文件按钮

        //监听分块上传过程中的三个时间点  
        WebUploader.Uploader.register({
            "before-send-file": "beforeSendFile",
            "before-send": "beforeSend",
            "after-send-file": "afterSendFile",
        }, {
            //时间点1：所有分块进行上传之前调用此函数  
            beforeSendFile: function (file) {
                var deferred = WebUploader.Deferred();
                //1、计算文件的唯一标记，用于断点续传  
                (new WebUploader.Uploader()).md5File(file, 0, 2 * 1024 * 1024)
                    .progress(function (percentage) {
                        $('#' + file.id).find("p.state").text("正在读取文件信息...");
                    }).then(function (val) {
                        fileMd5 = val;
                        $('#' + file.id).find("p.state").text("成功获取文件信息...");
                        
                        $("#picker").hide();
                        $("#btn").show();

                        //获取文件信息后进入下一步  
                        deferred.resolve();
                    });
                return deferred.promise();
            },
            //时间点2：如果有分块上传，则每个分块上传之前调用此函数  
            beforeSend: function (block) {
                var deferred = WebUploader.Deferred();

                $.ajax({
                    type: "POST",
                    url: hosturl + "superMaxFilePageChunkMergeUpload/maxFileUpload?action=checkChunk" + hoken,
                    data: {
                        //文件唯一标记  
                        fileMd5: fileMd5,
                        //当前分块下标  
                        chunk: block.chunk,
                        //当前分块大小  
                        chunkSize: block.end - block.start
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.ifExist) {
                            //分块存在，跳过   
                            deferred.reject();
                        } else {
                            //分块不存在或不完整，重新发送该分块内容  
                            deferred.resolve();
                        }
                    }
                });

                this.owner.options.formData.fileMd5 = fileMd5;
                deferred.resolve();
                return deferred.promise();
            },
            //时间点3：所有分块上传成功后调用此函数  
            afterSendFile: function (file) {
                //如果分块上传成功，则通知后台合并分块  
                $.ajax({
                    type: "POST",
                    url: hosturl + "superMaxFilePageChunkMergeUpload/maxFileUpload?action=mergeChunks" + hoken,
                    data: {
                        fileMd5: fileMd5,
                        fileName: file.name
                    },
                    success: function (datas) {
                        if(datas==userLoginInfo.logininfo.loginIN){
                            $('#' + file.id).find('p.state').text('还未登录请先登录'); 
                            return;
                        }
                        // alert("上传成功");
                        // params.callback(data);
                        // alert(data)
                        var data = JSON.parse(datas);
                        // params.callback(data);
                        webUploaderUitl.superCallback(data);
                    }
                });
            }
        });
        var guidnow = WebUploader.Base.guid();
        var uploader = WebUploader
            .create({
                // swf文件路径  
                swf: 'https://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
                // 文件接收服务端。  
                server: hosturl + 'uploadMaxFileService/upload2' + '?a=a' + hoken,
                formData: {
                    guid: guidnow,
                    fileMd5: fileMd5,
                },
                // 选择文件的按钮。可选。  
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
                pick: {
                    id: '#picker',//这个id是你要点击上传文件的id
                    multiple: false
                },
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！  
                resize: true,
                auto: true,
                //开启分片上传  
                chunked: true,
                chunkSize: 2 * 1024 * 1024,

                accept: {
                    extensions: "txt,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx",
                    mimeTypes: '.txt,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx'
                }
            });

        // 当有文件被添加进队列的时候  
        uploader.on('fileQueued', function (file) {
            $list.append(
                '<div id="' + file.id + '" class="item">'
                + '<p class="info">' + file.name + '</p>'
                + '<p class="state">等待上传...</p></div>');
        });

        // 文件上传过程中创建进度条实时显示。  
        uploader.on('uploadProgress', function (file, percentage) {
            $('#' + file.id).find('p.state').html(
                '上传中 <label id="jdtid" style="width:' + (Math.round(percentage * 100) * 5) + 'px;"></label>'
                + Math.round(percentage * 100) + '%'
            );
        });

        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传成功'); 
            $("#btn").hide();

        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错'); 
            $("#btn").hide();
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });


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

            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('继续上传');
            }
        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop(true);
            } else {
                uploader.upload();
            }
        });
    },
    /**
     * 初始化超大文件分块上传服务
     * 
     */
    init: function () {
        loadjscssfile("/index/lib/webuploader-0.1.5/webuploader.css","css");//加载 css
        loadjscssfile("/index/lib/webuploader-0.1.5/webuploader.js","js");//加载 js
        loadjscssfile("/index/css/uitl/webUploaderUitl.css","css");//加载 css
       
    }
}
webUploaderUitl.init();

介绍

1. var hosturl = SuperMaxFileUploadServerUrl;//后端服务器地址，平常放到共共包里

调用方法

* 调用方法 
    function start() {
		//1.更新设置回调方法
		webUploaderUitl.superCallback=function(data){
			alert(data.state);
		};
		//2.打开输入框
		webUploaderUitl.openWebUploaderPopup();
	}

页面代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>webuploader上传</title>
	<script type="text/javascript" src="./index/lib/jquery.js"></script>
	 
	<script type="text/javascript" src="./index/js/data.js"></script>
	<script type="text/javascript" src="index/js/uitl/webUploaderUitl.js"></script>

</head>
<style>

</style>

<body>

	<input type="button" onclick="start()" value="打开上传超大文件服务" />


</body>
<script>
	function start() {
		
		//1.设置回调方法
		webUploaderUitl.superCallback=function(data){
			alert(data.state);
		};
		//2.打开输入框
		webUploaderUitl.openWebUploaderPopup();
	}
</script>

</html>

介绍

1.先更新回调方法，修改方法中的内容即可

2.打开上传控件框

css代码

.bjyy {
    width: 100%;
    position: absolute;
    height: 100%;
    background: #000;
    top: 0px;
    left: 0px;
    z-index: 110;
    opacity: 0.5;
     
}

#uploader {
    
    background: #fff;
    /* border: 1px solid #000; */
    box-shadow: 5px 5px 8px #888888;
    padding: 0px;
    width: 500px;
    text-align: center;
    z-index: 111;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -251px;
    margin-top: -150px;
    border-radius: 5px;
}

#btn {
    display: none;
    float: right;
    margin-top: -87px;
    cursor: pointer;
    margin-right: 21px;
}

#picker {
    /* width: 120px; */
}

.btns {
    padding: 20px;
}

.uploaderTitle {
    height: 50px;
    color: #333;
    line-height: 50px;
    background: #D9E7FD;
    margin-bottom: 50px;
}

.uploaderTitle span {
    margin-left: 389px;
    padding: 0px 5px;
    width: 30px;
    cursor: pointer;
    /*  border: 1px solid #333;
    float: right;
    height: 25px;
    margin-top: 11px;
    margin-right: 10px;
    line-height: 25px; */
}

.uploaderTitle span:hover {
    background: cornflowerblue;
}

#jdtid {
    display: block;
    height: 5px;
    background: #60A6F1;
}

这是页面代码服务端代码，查看文章

https://yushen.blog.youkuaiyun.com/article/details/108635862

代码中有俩个接口进行了接口地址更新

1.校验块地址

2.上传块地址

3.整合块地址

有需要随时留言