当前位置: 首页 > 工具软件 > md5s > 使用案例 >

layui 框架之秒传文件 (前端分段 MD5 型成秒传)

阳文轩
2023-12-01

layui 框架之秒传文件 (前端分段 MD5 型成秒传)

JavaScript之 文件分段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方式请求,可以通过请求的地址来接收值。

转载于:https://www.cnblogs.com/tyler-bog/p/10994315.html

 类似资料: