用spark-md5.js自動生成MD5碼
阿新 • • 發佈：2017-11-12
ron res || 文件 str 上傳文件 ada spa read
項目中會遇到很多上傳文件時自動生成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>
以上僅部分功能。歡迎指正！
用spark-md5.js自動生成MD5碼