初始化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('
'
' + file.name + '
' +'
等待上传...
' +'
/* 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 = $('
'
' +'
).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页面
文档列表全部上传
全部暂停
全部继续
文件名大小状态操作
等待中...
示例展示
图片_20200410162229.png