前后端文件内容 md5 计算

目前普遍应用的比较多的是计算文件名的 md5，利用 jquery.md5.js 即可实现；若要计算文件内容的 md5，jquery.md5.js 就实现不了，需要用到插件：SparkMD5。

前端 js

1、index.html

<form class="layui-form" action="">
        <div class="layui-inline" style="margin-bottom: 10px !important;">
            <label class="layui-form-label">上传文件</label>
            <div class="layui-input-block">
                <input id="file" name="title" class="layui-input" type="file"
                       autocomplete="off" lay-verify="title">
            </div>
        </div>


        <div class="layui-form-item" style="margin-top: 1.25rem;">
            <div class="layui-input-block">
                <div class="layui-btn" type="submit" lay-filter="demo1" lay-submit="" id="submits">立即提交</div>
            </div>
        </div>

    </form>

2、index.js

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/spark-md5.min.js' %}"></script>          // 导入次 js
<script>
    $(document).ready(function () {
        document.getElementById('file').addEventListener('change', function () {
            var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                file = this.files[0],
                chunkSize = 2097152,                             // Read in chunks of 2MB
                chunks = Math.ceil(file.size / chunkSize),
                currentChunk = 0,
                spark = new SparkMD5.ArrayBuffer(),
                fileReader = new FileReader();

            fileReader.onload = function (e) {
                spark.append(e.target.result);                   // Append array buffer
                currentChunk++;

                if (currentChunk < chunks) {
                    loadNext();
                } else {
                    var md5 = spark.end();                  // 获取md5，此处有坑，使用过一次后再传递值，值会发生变化

                    // 将 md5 保存到 js 缓存中
                    var storage = window.localStorage;
                    storage.setItem("file_md5", spark.end())
                }
            };

            fileReader.onerror = function () {
                console.warn('oops, something went wrong.');
            };

            function loadNext() {
                var start = currentChunk * chunkSize,
                    end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

                fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
            }

            loadNext();
        });

    });

    // js读取cookie的方法
    function getCookie(name) {
        var r = document.cookie.match("\b" + name + "=([^;]*)\b");
        return r ? r[1] : undefined;
    }

    layui.use('layer', function () {
        var layer = layui.layer;
    });

    $('#submits').click(function () {
        var formdata = new FormData();  // 生成文件对象
        formdata.append('file', $('#file')[0].files[0]); //添加文件流

        // 从缓存中取出文件内容 md5
        var storage = window.localStorage;
        var value = storage.getItem("file_md5");

        $.ajax({
            url: '/v1/remoteBinFile/?md5=' + value + '',
            type: 'post',
            dataType: 'json',
            headers: {
                "X-CSRFToken": getCookie("csrf_token")
            },

            data: formdata,
            processData: false,             // ajax post 请求上传文件必须添加这两句
            contentType: false,

            success: function (resp) {
                var msg = resp[10007];
                layer.msg(msg);
            }
        })
    });

</script>

参考文章：

• javascript 计算文件MD5 浏览器 javascript读取文件内容
• SparkMD5
• ajax实现文件上传

后端 Python

import hashlib
import os


def GetFileMd5(filename):
    """
    计算文件的MD5值
    :param filename:
    :return:
    """
    if not os.path.isfile(filename):
        return
    myhash = hashlib.md5()
    with open(filename, 'rb') as f:
        while True:
            b = f.read(8096)
            if not b:
                break
            myhash.update(b)
        f.close()


    return myhash.hexdigest()           # c8030929da1e41862048f1f50cf0b3ce


if __name__ == '__main__':
    GetFileMd5(r'C:Usersdly15Desktop新建文本文档.txt')