初始化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>
<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
