浏览器,如果不能使用HTML5的file api,对文件md5是几乎不可能的事。如果可以不使用file api,还请哪位大牛給分享一下。
要在浏览器中对文件进行md5,基本思路就是使用HTML5的FileReader接口把文件读取到内存,然后获取文件的二进制内容,最后再进行md5。
Github中已经有人最这个问题进行研究,其中比较优秀的一个项目就是:js-spark-md5,该项目使用了世界上最快的md5算法。
为了更好的重用代码,我在js-spark-md5的基础上封装了browser-md5-file,可以更方便的使用md5 file。
-
项目地址:browser-md5-file
-
Demo: 查看
源码如下:
<!doctype html>
<html class="theme-next use-motion ">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="description" content="forsigner, 前端开发, 用户体验, 设计, frontend, design, nodejs, browser-md5-file"/>
<meta name="keywords" content="browser-md5-file"/>
<title>browser-md5-file</title>
<style>html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a{background-color:transparent;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}input{color:inherit;font:inherit;margin:0;}input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.5.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.fa-github:before{content:"f09b";}.container{position:absolute;top:50%;margin-top:-200px;100%;height:300px}.text{margin-top:20px;font-size:40px;color:#999}.github{color:#222}.github:hover{color:#000}.text-center{text-align:center}.btn-upload{font-size:22px;display:inline-block;text-decoration:none;outline:none;border:1px solid #dfdfdf;height:50px;line-height:50px;300px;border-radius:50px;background:#fff;color:#666}.btn-upload:hover{color:#333;border:1px solid #cfcfcf}.btn-file{position:relative;overflow:hidden}.btn-file input[type=file]{position:absolute;top:0;right:0;min-100%;min-height:100%;filter:alpha(opacity=0);opacity:0;outline:none;background:white;cursor:inherit;display:block}.btn-file input[type=file]:hover{cursor:pointer}</style>
</head>
<body>
<div class="container text-center">
<br/>
<h1>Browser-md5-file <a class="github" href="https://github.com/forsigner/browser-md5-file" target="_blank"><i class="fa fa-github"></i></a></h1>
<div class="text-center"></div>
<br/>
<span id="upload" class="btn-upload btn-file">
Upload File
<input type="file" id="btn-guid">
</span>
<br/>
<br/>
<div id="text" class="text text-center"></div>
</div>
<br/>
<br/>
<script src="js/bundle.js"></script>
</body>
</html>
JS文件:bundie.js
原文链接:https://www.cnblogs.com/kelelipeng/p/10158599.html