用spark-md5.js自动生成MD5码-CSDN博客

项目中会遇到很多上传文件时自动生成MD5码的情况，根据查找资料，写了个小案例，仅供大家参考。

代码如下：

　html部分：

<body>
<input id="file" type="file" multiple="multiple">
<input type="text" id="md5">
</body>

js部分：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script> //引入jquery
<script type="text/javascript" src="spark-md5.js"></script> //引入spark-md5.js插件
<script type="text/javascript">
    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
            input = $('#file'),
            running = false;

　　$("#file").on("focus",function () {
        $("#md5").val("");//添加文件时，#md5清空
    });
    $("#file").on("blur",function () {
        if($("#file").val()){ //#file失去焦点时，文件特别大时#md5显示提示内容
            $("#md5").val("正在生成MD5码，请稍等...").css("color","red");
        }

　　　　if (running) {
            return;
        }
        if (!input.files.length) {
            return;
        }
        var fileReader = new FileReader(),
                file = input.files[0];
        fileReader.onload = function (e) {
            running = false;
            if (file.size != e.target.result.byteLength) {
                return false;
            } else {
                $("#md5").val(SparkMD5.ArrayBuffer.hash(e.target.result)).css("color","black");//生成md5码
            }
        };
        running = true;
        fileReader.readAsArrayBuffer(file);
    });
</script>