WebUploader的官网
http://fex.baidu.com/webuploader/doc/index.html
关于上传文件, 我有写过片关于ant 使用upload上传文件
https://blog.csdn.net/zm_miner/article/details/95083719
但是现在修改成分片上传, 使用WebUploader实现大文件分片上传,并且有进度显示
html中写的eg
直接复制就可以跑起来用起来
没有用到md5
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://cdn.staticfile.org/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</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>
<div id="progress"></div>
</div>
</div>
</body>
<script type="text/javascript">
var GUID = WebUploader.Base.guid();//一个GUID
var chunkSize = 5 * 1024 * 1024;
var $thelist = $('#thelist');
var uploader = WebUploader.create({
// // 指定选择文件的按钮容器，不指定则不创建按钮。
pick: {
id: '#picker', // 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点
label: '选择文件1', // 请采用 innerHTML 代替
multiple: true // 是否开起同时选择多个文件能力
},
auto: false, // 设置为 true 后，不需要手动调用上传，有文件选择即开始上传
prepareNextFile: true, //否允许在文件传输时提前把下一个文件准备好。 某些文件的准备工作比较耗时，比如图片压缩，md5序列化。 如果能提前在当前文件传输期处理，可以节省总体耗时。
chunked: true, // 是否要分片处理大文件上传
chunkSize: 5 * 1024 * 1024, // 如果要分片，分多大一片？ 默认大小为5M
chunkRetry: 4, //如果某个分片由于网络问题出错，允许自动重传多少次
chunkRetryDelay: 1000, // 开启重试后，设置重试延时时间, 单位毫秒
threads: 3, // 上传并发数。允许同时最大上传进程数
formData: {
uid: 0,
md5: '',
chunkSize: chunkSize,
guid: GUID,
},
server: 'http://172.18.71.64:18000/upload/upload',
swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
fileNumLimit: 1000, //验证文件总数量, 超出则不允许加入队列
fileSizeLimit: 1024 * 1024 * 1024 * 1024, // 10G,验证文件总大小是否超出限制, 超出则不允许加入队列
fileSingleSizeLimit: 1024 * 1024 * 1024 * 10,// 验证单个文件大小是否超出限制, 超出则不允许加入队列
duplicate: false, //去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
});
$("#ctlBtn").click(function () {
uploader.upload();
});
// // 当文件添加进队列以后触发
uploader.on('filesQueued', function (files) {
console.log("filesQueued");
for (var i = 0; i < files.length; i++) {
$thelist.append('<div id="' + files[i].id + '" class="item">' +
'<h4 class="info">' + files[i].name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
}
});
//当文件上传成功时触发。
uploader.on("uploadSuccess", function (file) {
$.post('http://172.18.71.64:18000/upload/merge', { guid: GUID, fileName: file.name }, function (data) {
if (data.code == 200) {
alert('上传成功!');
}
});
});
// 上传过程中触发，携带上传进度
uploader.on('uploadProgress', function (file, percentage) {
console.log('uploadProgress')
percentage = percentage.toFixed(2);
getProgressBar(file, percentage, "FILE", "上传进度");
});
/**
* 生成进度条封装方法
* @param file 文件
* @param percentage 进度值
* @param id_Prefix id前缀
* @param titleName 标题名
*/
function getProgressBar(file, percentage, id_Prefix, titleName) {
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');
}
var progressPercentage = percentage * 100 + '%';
$percent.css('width', progressPercentage);
$percent.html(titleName + ':' + progressPercentage);
}
</script>
</html>
