zoukankan      html  css  js  c++  java
  • 浏览器前端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;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

  • 相关阅读:
    《DSP using MATLAB》 示例 Example 9.12
    《DSP using MATLAB》示例 Example 9.11
    《DSP using MATLAB》示例 Example 9.10
    《DSP using MATLAB》示例Example 9.9
    《DSP using MATLAB》示例 Example 9.8
    《DSP using MATLAB》示例Example 9.7
    《DSP using MATLAB》示例 Example 9.6
    《DSP using MATLAB》示例Example 9.5
    《DSP using MATLAB》示例 Example 9.4
    (转载)【C++11新特性】 nullptr关键字
  • 原文地址:https://www.cnblogs.com/7qin/p/13654843.html
Copyright © 2011-2022 走看看