瀏覽器前端js獲取檔案的MD5值
阿新 • • 發佈：2020-09-11
瀏覽器，如果不能使用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;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
JS檔案：bundie.js
原文連結：https://www.cnblogs.com/kelelipeng/p/10158599.html