JavaScript 对文件进行MD5加密

版权声明：lie_sun版权所有 https://blog.csdn.net/weixin_43260760/article/details/84670561

为了区分文件是否为同一个文件，即便文件名不同，文件内容相同，MD5之后的值也是相同的

下面 具体代码：

<script src="../js/spark-md5.min.js"></script>
function get_filemd5sum(ofile) {
        var file = ofile;
        var tmp_md5;
        var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
            // file = this.files[0],
            chunkSize = 8097152, // Read in chunks of 2MB
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,
            spark = new SparkMD5.ArrayBuffer(),
            fileReader = new FileReader();

        fileReader.onload = function (e) {
            // console.log('read chunk nr', currentChunk + 1, 'of', chunks);
            spark.append(e.target.result); // Append array buffer
            currentChunk++;
            var md5_progress = Math.floor((currentChunk / chunks) * 100);

            console.log(file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%");
            var handler_info = document.getElementById("handler_info");
            var progressbar = document.getElementsByClassName("progressbar")[0];
            handler_info.innerHTML = file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%"
            progressbar.value = md5_progress;
            if (currentChunk < chunks) {
                loadNext();
            } else {
                tmp_md5 = spark.end();
                filemd5 = tmp_md5;
                console.log(tmp_md5)
                handler_info.innerHTML = file.name + "的MD5值是：" + tmp_md5;
            }
        };

        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();
    }

spark-md5.min.js 哪里有？ 这里找： spark-md5.min.js

具体操作界面

1、上传之前

2、上传之后的界面

3、HTML代码实现

<div class="opera-area">
        <!--音乐上传-->
        <div class="music upload">
            <div class="upload-con">
                <i class="iconfont icon-icon--"></i>
                <p style="margin: 0;padding: 0;" id="audio_name">选择音频</p>
            </div>
            <input type="file" accept="audio/*" id="audio">
        </div>
        <!--文档上传-->
        <div class="document upload">
            <div class="upload-con">
                <i class="iconfont icon-icon--"></i>
                <p style="margin: 0;padding: 0;" id="txt_name">选择文件</p>
            </div>
            <input type="file" accept=".txt" id="txt">
        </div>
    </div>
    <div>
        <progress class='progressbar' value="0" max="100" style='width:600px;margin: auto; margin-top:20px'></progress>
        <div style='margin-top:20px'>
            <span id="handler_info"></span>
        </div>
    </div>

3、JavaScript代码实现

	//语音
    $("#audio").on("change", function () {
        let file = $("#audio")[0].files[0];
        if (!file) {
            $("#audio_name").text('选择音频');
            $(".progressbar").attr('value', 0);
            $("#handler_info").html('');
            filemd5 = '';
        } else {
            $("#audio_name").text(file.name);
            get_filemd5sum(file)
        }
    });