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

  • 相关阅读:
    node.js结合wechaty实现微信机器人[基础篇]
    .env文件为NodeJS全局环境变量
    基于jquery实现一个提示插件
    Puppeteer实现一个超简单的自动化机器人
    Vue高仿阿里动态banner,制作组件
    css不常用属性
    Vue表单校验失败滚动到错误位置
    C# Func委托
    深入解析C# 4th 笔记(第一章)
    C# 笔记 XML基础
  • 原文地址:https://www.cnblogs.com/7qin/p/13654843.html
Copyright © 2011-2022 走看看