项目中会遇到很多上传文件时自动生成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码
原文地址:http://www.cnblogs.com/lingdu87/p/7821761.html