浏览器前端js获取文件的MD5值

浏览器，如果不能使用HTML5的file api，对文件md5是几乎不可能的事。如果可以不使用file api，还请哪位大牛給分享一下。

要在浏览器中对文件进行md5，基本思路就是使用HTML5的FileReader接口把文件读取到内存，然后获取文件的二进制内容，最后再进行md5。

Github中已经有人最这个问题进行研究，其中比较优秀的一个项目就是：js-spark-md5，该项目使用了世界上最快的md5算法。

为了更好的重用代码，我在js-spark-md5的基础上封装了browser-md5-file，可以更方便的使用md5 file。

源码如下：

<!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;width: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;width: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-width: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

posted @ 2020-09-11 22:36  笠航  阅读(3246)  评论(0)  编辑  收藏  举报