初始化js

/**
 * 页面初始化
 * @private
 */
function _init() {

     //  这个必须要再uploader实例化前面
    WebUploader.Uploader.register({
        'before-send-file': 'beforeSendFile',//整个文件上传前
        'before-send': 'beforeSend', //每个分片上传前
        "after-send-file": "afterSendFile"  //分片上传完毕
    }, {
        beforeSendFile: function (file) {
            // Deferred对象在钩子回掉函数中经常要用到，用来处理需要等待的异步操作。
            var deferred = WebUploader.Deferred();
            // 根据文件内容来查询MD5，判断是否是同一个文件
            debugger
            uploader.md5File(file, 0, 1024 * 1024)
                .progress(function (percentage) {
                    getProgressBar(file, percentage, "MD5", "正在计算md5值");
                    if (percentage == 1) {
                        getProgressBar(file, percentage, "MD5", "计算md5值完成")
                        $('#' + file.id).find('.progress').fadeOut();
                    }
                })
                .then(function (val) { // 完成
                    console.info(val);
                    console.log("MD5计算完成。");
                    console.log("正在查找有无断点...");
                    file.uid = WebUploader.Base.guid();
                    file.md5 = val;
                    md5(file);
                    //获取文件信息后进入下一步
                    deferred.resolve();
                });
            return deferred.promise();
        },

        beforeSend: function (block) {
            var indexchunk = block.file.indexcode;//获取已经上传过的下标
            var deferred = WebUploader.Deferred();
            if (indexchunk > 0) {
                if (block.chunk > indexchunk) {
                    //分块不存在，重新发送该分块内容
                    deferred.resolve();
                } else {
                    //分块存在，跳过
                    deferred.reject();
                }
            } else {
                //分块不存在，重新发送该分块内容
                deferred.resolve();
            }
            //返回Deferred的Promise对象。
            return deferred.promise();
        }
        , afterSendFile: function (file) {
            //如果所有分块上传成功，则通知后台合并分块
            $.ajax({
                type: "POST",
                url: "${ctx}/break/filewebMerge.json",  //ajax将所有片段合并成整体
                data: {
                    fileName: file.name,
                    fileMd5: file.md5
                },
                success: function (data) {

                }, error: function () {

                }
            });
        }
    });

    /**
     * 实例化
     */
     uploader = WebUploader.create({
        // swf文件路径
        swf: '/webjars/plugins/webupload/Uploader.swf',
        // 文件接收服务端。
        server: apiUrls.rootPath + "dmDocument/uploadTest",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id: '#picker',
            label: '点击选择文件'
        },
        auto: false,
        duplicate: false,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
        threads: 3,
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        chunked: true,//开启分片
        chunkSize: 1024 * 1024 * 50, //每次50M
        fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
        fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        $("#thelist").append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');
        /* uploader.md5File(file,0, 1024 * 1024 * 50)
         console.log("正在计算MD5值...");
         uploader.md5File(file)
             .progress(function (percentage) {
                 getProgressBar(file, percentage, "MD5", "正在计算md5值");
                 if (percentage == 1) {
                     getProgressBar(file, percentage, "MD5", "计算md5值完成")
                 }
             })
             .then(function (val) { // 完成
                 file.md5 = val;
                 console.log("MD5计算完成。");
                 console.log("正在查找有无断点...");
                 console.info(val);
                 file.uid = WebUploader.Base.guid();
                 md5(file);
             });*/
        $("#stopBtn").click(function () {
            console.info("暂停");
            uploader.stop(true);
        });

        //继续下载
        $("#restart").click(function () {
            //debugger
            //md5(file);
            uploader.upload();
        });

    });

     //当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
    uploader.onUploadBeforeSend = function (obj, data) {
        //console.log("onUploadBeforeSend");
        var file = obj.file;
        data.md5 = file.md5 || '';
        data.uid = file.uid;
    };


    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        getProgressBar(file, percentage, "文件", "上传进度", "上传中");
    });
}
/**
 * 绑定页面按钮事件
 * @return {[type]} [description]
 */
var _bindBtnEvent = function () {

     //上传文件按钮
    $("#ctlBtn").on('click', function () {
        uploader.upload();
    })

    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');
    });

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

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
    });
}
  /**
     *  生成进度条封装方法
     * @param file 文件
     * @param percentage 进度值
     * @param id_Prefix id前缀
     * @param titleName 标题名
     */
    function getProgressBar(file, percentage, id_Prefix, titleName, stateName) {
        var $li = $('#' + file.id), $percent = $li.find('#' + id_Prefix + '-progress-bar');
        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div id="' + id_Prefix + '-progress" class="progress progress-striped active">' +
                '<div id="' + id_Prefix + '-progress-bar" class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>'
            ).appendTo($li).find('#' + id_Prefix + '-progress-bar');
        }
        $percent.css('width', parseInt(percentage * 100) + "%");
        $percent.html(titleName + ':' + parseInt(percentage * 100) + "%");
        $li.find('p.state').text(stateName);
    }

    var md5 = function (file) {
        var md5 = file.md5;
        // 调用方法发送请求服务
        wui.ajax({
            url: apiUrls.rootPath + "dmDocument/checkshard?fileMd5=" + md5,  //验证文件是否上传过程中中断掉，断点续传，不需要重新开始上传
            method: "GET",
            onSuccess: function (res) {
                var datacode = res.statusCode;
                file.indexcode = datacode;
            },
            onError: function (res) {
            },
            async: false,
        })
    }

html页面

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <title>文档列表</title>
    <script src="/webjars/plugins/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/plugins/webupload/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/webjars/themes/layout/wui.min.css"/>

    <link rel="stylesheet" href="/webjars/plugins/webupload/bootstrap.min.css">
    <link rel="stylesheet" href="/webjars/plugins/webupload/bootstrap-theme.min.css">
    <script type="text/javascript" src="/webjars/plugins/webupload/webuploader.nolog.js"></script>

    <!-- WUI组件脚本 -->
    <script src="/webjars/wui.min.js" type="text/javascript"></script>
    <script src="/webjars/wui.plugins.min.js" type="text/javascript"></script>
    <!-- 自定义脚本 -->
    <script src="/js/common/apiUrls.js" type="text/javascript"></script>
    <!--<script src="/js/webupload/test1.js" type="text/javascript"></script>-->
    <script src="/js/webuploader/uploader.js" type="text/javascript"></script>
</head>

<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <!--<div id="thelist" class="uploader-list"></div>-->

    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">全部上传</button>
        <button id="stopBtn" class="btn btn-default">全部暂停</button>
        <button id="restart" class="btn btn-default">全部继续</button>
    </div>
    <!--展示带上传文件-->
    <div class="ui-jqgrid-hbox">
        <table style="width: 100%;" id="fileTemplate">
            <thead>
            <tr>
                <th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <!--存放文件列表-->
            <tbody id="fileTable">

            </tbody>
        </table>
    </div>
</div>
</body>

</html>
<script type="text/html" id="fileTemplateId">
    <tr id="{{id}}">
        <td>{{name}}</td>
        <td>{{fileSize}}</td>
        <td class="pro" width="400px"><p class="state">等待中...</p>
        </td>
        <td id="show{{id}}">
            <a style="cursor:pointer" data-upload=false onclick="fileStart(this,'{{id}}')" class="file-play"
               data="{{id}}"><i class="fa fa-play"></i></a>
            &nbsp;&nbsp;
            <a title="删除" style="cursor:pointer" onclick="fileClose(this,'{{id}}')" class="file-close" data="{{id}}"><i
                    class="fa fa-close"></i></a>
            <a  title="上传成功" style="cursor:pointer;display: none"
               data="{{id}}"><i class="fa fa-check-circle finish"></i></a>


        </td>
    </tr>

</script>

示例展示

图片_20200410162229.png