layui 框架之秒传文件 (前端分段 MD5 型成秒传）
思路：
通过layui框架的上传功能，在上传选择文件后，使用 选择文件回调 ，对文件进行md5加密，再上传时，使用 文件上传前的回调 把md5值赋给文件，和数据一并上传 (注意：他的上传方式为post请求 )
代码：
test.html
<html>
<head>
<meta charset="utf-8">
<!--自己的layui路径-->
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
</div>
<!--设置成自己的下载的md5路径-->
<script src="/static/js/md5.js"></script>
<!--设置成自己的md5路径-->
<script src="/static/layui/layui.js" charset="utf-8"></script>
<!--设置成自己的js代码路径-->
<script src="/static/js/my_md5.js">
</script>
</body>
</html>
my_md5.js
// var res_md5
// 框架部分
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '/home/upload/' //请求的地址
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
data={'md5':'asdada'}
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
ress = check(file); // 执行获取md5
console.log(ress);
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
, '</td>'
, '</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
console.log(res_md5,13)
this.data={'md5':res_md5}
}
, done: function (res, index, upload) {
if (res.code == 0) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
// 生成MD5的函数部分
function md5s(str) {
var MD5 = new Hashes.MD5().hex(str)
return MD5
}
// Button按钮点击调用此函数。fileId为上传文件input的id值
function check(fileId, split_num = 32, get_byte = 64) {
var info = new String;
var sum = 0;
/*fileId：文件对象
split_num: 需要分割生成MD5的数量，默认32
get_byte: 每段需要取的字节个数，默认64字节
小于2MB的文件直接MD5*/
// 判断 split_num和get_byte 是否为数字
// fileId为：
// file {name: "System Toolkit_2.2.1_xclient.info.dmg", lastModified: 1559223750878, lastModifiedDate: Thu May 30 2019 21:42:30 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 18142208, …}lastModified: 1559223750878lastModifiedDate: Thu May 30 2019 21:42:30 GMT+0800 (中国标准时间) {}name: "System Toolkit_2.2.1_xclient.info.dmg"size: 18142208type: ""webkitRelativePath: ""__proto__: File "1212"
var blob = fileId;
// 定义常量 const ，不可修改
// 获取文件的总大小
const size = blob.size;
// 计算每段的大小
const mean_size = Math.floor(size / split_num);
// 判断文件大小，如果小于 split_num * get_byte 就直接MD5
if (size < split_num * get_byte) {
//创建读取器对象FileReader
//数据读完会触发onload事件
res_md5 = md5s(blob(0,blob.size())); // 得到md5值
console.log(res_md5);
return res_md5
} else {
var start = 0; // 定义开始位置
var end = get_byte; // 定义截取结束位置
while (start < size) {
var read = new FileReader(); //创建读取器对象FileReader
blobs = blob.slice(start, end); //创建Blob对象
read.readAsText(blobs); //开始读取文件
start = start + mean_size; // 下一段开始位置
end = start + get_byte; // 定义截取结束位
info += blobs;
res_md5 = md5s(info);
console.log(res_md5);
return res_md5
}
}
}
MD5.js
(自己下载一下)
'https://blog-static.cnblogs.com/files/tyler-bog/md5_encrypt.js'
后端接收数据
MD5提交的方式是用post方式请求，可以通过请求的地址来接收值。
