<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>上传文件</title>
<link rel="stylesheet" type="text/css" href="../Js/layui/font/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../Js/layui/css/layui.css" />
<style>
body {
font-family: 'Microsoft YaHei';
}
.hidden {
display: none;
}
.middle-align {
vertical-align: middle;
text-align: center;
}
.icon-shangchuan1 {
font-size: 50px;
}
.layui-footer {
background-color: transparent !important;
left: 0 !important;
vertical-align: middle !important;
text-align: center !important;
padding: 10px !important;
}
.layui-form {
padding: 15px !important;
}
p {
padding: 5px;
}
.layui-form-label {
text-align: left !important;
}
.layui-form {
padding: 0px !important;
}
.layui-form-item {
margin: 15px !important;
}
.webuploader-element-invisible {
display:none;
}
.fileinfo {
padding: 10px;
}
</style>
</head>
<body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/webuploader/webuploader.js"></script>
<script src="../Js/layui/layui.all.js"></script>
<script src="../Js/Common.js"></script>
<form class="layui-form middle-align" onkeydown="if(event.keyCode==13)return false;">
<div class="layui-form-item layui-layout-admin middle-align">
<div>
<div class="layui-upload-drag middle-align" id="uploadFile">
<i class="iconfont icon-shangchuan1"></i>
<p id="uploadTips"></p>
</div>
</div>
</div>
<div class="fileinfo hidden">
<p id="uploadingTips"></p>
<p id="fileName"></p>
<p id="fileSize"></p>
</div>
<div class="fileinfo hidden">
<div class="layui-progress" id="uploadProgress" lay-filter="uploadProgress" lay-showpercent="true">
<div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
</div>
</div>
</div>
<div class="layui-form-item layui-layout-admin">
<a id="back" class="layui-btn layui-btn-primary"></a>
</div>
</form>
<script>
var intervalHandle;
var param = layui.getParams();
var currId = parseInt(param.currId);
var currUser = param.currUser;
layui.$("#uploadTips").text(layui.translater("UploadTips"));
layui.$("#uploadingTips").text(layui.translater("Uploading"));
layui.$("#back").text(layui.translater("Cancel"));
var fileSize;
var fileMd5;
var uploadChunks;
var GUID = WebUploader.Base.guid();//一个GUID
WebUploader.Uploader.register({
"before-send": "beforeSend"
}, {
beforeSend: function (block) {
var task = WebUploader.Deferred();
if (uploadChunks != null && (uploadChunks.indexOf("," + block.chunk + ",") > -1 || uploadChunks.indexOf("%%%") > -1)) {
task.reject();
} else {
task.resolve();
}
return task.promise();
}
});
//请求服务器查询有哪些分片已上传
var uploader = WebUploader.create({
swf: '../js/webuploader/Uploader.swf',
server: '/CloudDisk/Upload/UploadFile',
pick: '#uploadFile',
dnd: 'body',//设置dnd为整个页面
resize: false,
chunked: true,//开始分片上传
threads: 4,
chunkSize: 4096000,//每一片的大小
auto: false,
extensions: 'zip',
formData: {
guid: GUID
}
});
uploader.on('fileQueued', function (file) {
fileSize = (parseFloat(file.size) / 1048576).toFixed(2);
if (fileSize > 500) {
window.top.layer.alert(layui.translater("FileSizeAstrict") + "500M");
return false;
}
layui.$("#uploadFile").addClass("hidden");
layui.$(".fileinfo").removeClass("hidden")
layui.$("#fileName").text(layui.translater("FileName") + ":\r\n" + file.name);
layui.$("#fileSize").text(layui.translater("FileSize") + ":\r\n" + fileSize + "M")
layui.element.progress('uploadProgress', '1%');
layui.element.render();
//获取文件MD5值
uploader.md5File(file, 0, 10 * 1024 * 1024)
// 完成
.then(function (md5) {
fileMd5 = md5;
uploader.options.formData.fileMd5 = md5;
if (uploadChunks == null || uploadChunks.indexOf(file.name + ":") == -1) {
layui.$.post("/CloudDisk/Upload/CheckUpload", { "fileMd5": fileMd5 }, function (res) {
uploadChunks = file.name + ":," + res.chunks + ",";
uploader.upload();
intervalHandle = self.setInterval(function () {
layui.$.post("/CloudDisk/Upload/GetUploadProgress", { "guid": GUID }, function (prog) {
var progressNumber = Number(prog.progress);
if (progressNumber > 0) {
$("#progressText").text((0.59 * progressNumber + 40).toFixed(0) + '%');
layui.element.progress('uploadProgress', (0.59 * progressNumber + 40).toFixed(0) + '%');
}
});
}, 3000);
});
}
});
});
uploader.on('uploadProgress', function (file, percentage) {
$("#progressText").text(Math.floor(percentage * 40).toFixed(0) + '%');
layui.element.progress('uploadProgress', Math.floor(percentage * 40).toFixed(0) + '%');
});
uploader.on('uploadSuccess', function (file) {
if (uploadChunks.indexOf("%%%") > -1) {
window.top.layer.alert(layui.translater("FileExists"));
layui.$("#back").click();
return false;
}
else {
layui.$.post('/CloudDisk/Upload/Merge', { fileMd5, guid: GUID, fileName: file.name, currUser, currId, fileSize }, function (res) {
layui.element.progress('uploadProgress', '100%');
layui.$("#back").click();
return false;
});
}
});
uploader.on('uploadError', function () {
layui.$("#back").click();
window.top.layui.layer.alert(layui.translater("UploadFaild"));
});
layui.elementOn("#back", "click", function () {
if (parent.loadPage) {
parent.loadPage();
}
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
</script>
</body>
</html>