layui 框架之秒传文件 (前端分段 MD5 型成秒传）
思路：
通过layui框架的上传功能，在上传选择文件后，使用 ，对文件进行md5加密，再上传时，使用 把md5值赋给文件，和数据一并上传 (注意：他的上传方式为post请求 )
代码：
test.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 = $(['' , '' + file.name + '' , '' + (file.size / 1014).toFixed(1) + 'kb' , '等待上传' , '' , '' , '' , '' , ''].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('上传成功'); 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('上传失败'); 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方式请求，可以通过请求的地址来接收值。