layui 框架之秒傳文件 (前端分段 MD5 型成秒傳）

時間 2019-11-22

標籤 layui 框架文件前端分段 md5 简体版

原文原文鏈接

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方式請求，能夠經過請求的地址來接收值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

layui 框架之秒傳文件 (前端分段 MD5 型成秒傳）

layui 框架之秒傳文件 (前端分段 MD5 型成秒傳）

JavaScript之 文件分段MD5加密、大文件秒加密校驗

思路：

經過layui框架的上傳功能，在上傳選擇文件後，使用 選擇文件回調 ，對文件進行md5加密，再上傳時，使用 文件上傳前的回調 把md5值賦給文件，和數據一併上傳 (注意：他的上傳方式爲post請求 )

代碼：

test.html

my_md5.js

MD5.js

後端接收數據

JavaScript之文件分段MD5加密、大文件秒加密校驗

經過layui框架的上傳功能，在上傳選擇文件後，使用選擇文件回調，對文件進行md5加密，再上傳時，使用文件上傳前的回調把md5值賦給文件，和數據一併上傳 (注意：他的上傳方式爲post請求 )