Skip to content

Instantly share code, notes, and snippets.

@donghaic

donghaic/BaiduWebUpload分段上传.html

Last active June 21, 2018 03:59
Show Gist options
  • Save donghaic/de472efb8c370a842d7a7d9ed3120109 to your computer and use it in GitHub Desktop.
Save donghaic/de472efb8c370a842d7a7d9ed3120109 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
BaiduWebUpload分段上传.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8"/>
<title>upload file</title>
<link type="text/css" th:href="@{bootstrap.min.css}" rel="stylesheet"/>
<link type="text/css" th:href="@{webuploader.css}" rel="stylesheet"/>
</head>
<body>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list" style="width:500px;"></div>
<div class="btns">
<div id="picker">选择文件</div>
</div>
</div>
<script th:src="@{jquery-3.1.1.min.js}"></script>
<script th:src="@{md5.js}"></script>
<script th:src="@{webuploader.js}"></script>
<script type="text/javascript">
var serverUrl = 'http://fileupload.biz.weibo.com/upload.php?fileserver=';
var md5File;
var fileserver = 1312;
//监听分块上传过程中的时间点
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile", // 整个文件上传前
"before-send": "beforeSend", // 每个分片上传前
"after-send-file": "afterSendFile" // 分片上传完毕
}, {
//时间点1：所有分块进行上传之前调用此函数 ，检查文件存不存在
beforeSendFile: function (file) {
var deferred = WebUploader.Deferred();
md5File = hex_md5(file.name + file.size);//根据文件名称，大小确定文件唯一标记，这种方式不赞成使用
uploader.md5File(file).then(function (val) {
console.log('md5 result:', val);
md5File = val;
var fileserverHex = md5File.substring(md5File.length - 6, md5File.length);
// fileserver = parseInt(fileserverHex, 16);
$.ajax({
type: "POST",
url: serverUrl + fileserver,
data: {
status: 'md5Check',
ext: file.ext,
fileserver: fileserver,
md5: md5File
},
async: false, // 同步
//dataType: "json",
success: function (response) {
if (response.ifExist == 1) { //文件存在，跳过 ，提示文件存在
$('#' + file.id).find('p.state').text("file exist");
console.info(response)
} else {
deferred.resolve(); //文件不存在或不完整，发送该文件
}
}
}, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
deferred.resolve();
});
});
return deferred.promise();
},
//时间点2：如果有分块上传，则每个分块上传之前调用此函数 ，判断分块存不存在
beforeSend: function (block) {
var deferred = WebUploader.Deferred();
var file = block.file;
var owner = this.owner;
owner.md5File(file.source, block.start, block.end).then(function (partMd5) {
block.partMd5 = partMd5;
$.ajax({
type: "POST",
url: serverUrl + fileserver,
data: {
status: 'chunkCheck',
chunkIndex: block.chunk,
size: block.end - block.start,
name: md5File, //文件唯一标记
chunk: block.chunk, //当前分块下标
partMd5: partMd5
},
// dataType: "json",
async: false, // 同步
success: function (response) {
if (response.ifExist == 1) {
console.info(response)
deferred.reject(); //分片存在，跳过
console.log("block " + block.chunk + ' 分片存在');
} else {
deferred.resolve(); //分块不存在或不完整，重新发送该分块内容
console.log("block " + block.chunk + ' 需要上传');
}
}
}, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
deferred.resolve();
});
});
return deferred.promise();
},
//时间点3：分片上传完成后，通知后台合成分片
afterSendFile: function (file) {
var chunksTotal = Math.ceil(file.size / (2.5 * 1024 * 1024));
if (chunksTotal >= 1) {
//合并请求
var deferred = WebUploader.Deferred();
$.ajax({
type: "POST",
url: serverUrl + fileserver,
data: {
status: 'chunksMerge',
ext: file.ext,
chunks: chunksTotal,
name: md5File,
md5: md5File
},
cache: false,
async: false, // 同步
//dataType: "json",
success: function (response) {
console.info(response)
if (response.status == 1) {
$('#' + file.id).find('p.state').text('upload success');
$('#' + file.id).find('.progress').fadeOut();
} else {
$('#' + file.id).find('p.state').text('merge error');
deferred.reject();
}
}
})
return deferred.promise();
}
}
});
var uploader = WebUploader.create({
auto: true,// 选完文件后，是否自动上传。
swf: '../static/Uploader.swf',// swf文件路径
server: serverUrl + 1312,// 文件接收服务端。
pick: '#picker',// 选择文件的按钮。可选。
chunked: true,//开启分片上传
chunkSize: 2.5 * 1024 * 1024,//5M
chunkRetry: 3,//错误重试次数
// accept: {
// //限制上传文件为txt
// extensions: 'txt'
// }
});
//上传添加参数
uploader.on('uploadBeforeSend', function (obj, data, headers) {
var blocks = obj.file.blocks;
var block = blocks[obj.chunk];
data.md5File = md5File;
data.userId = 'kazaff';
data.md5 = md5File;
data.name = obj.file.name;
data.type = obj.file.type;
data.lastModifiedDate = obj.file.lastModifiedDate;
data.file = 0;
data.chunks = obj.chunks;
data.chunk = obj.chunk;
data.partMd5 = block.partMd5;
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$("#picker").hide();//隐藏上传框
$("#thelist").append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state"></p>' +
'</div>');
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('Uploading');
$percent.css('width', percentage * 100 + '%');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment