js獲取文件MD5值

原文連接：http://www.jianshu.com/p/940a9226fbbd

 

要在web頁面中計算文件的md5值，還好這個項目是隻需兼容現代瀏覽器的，否則要坑死了。

其實對文件進行md5，對於後端來講是及其簡單的。好比使用Node.js，只要下面幾行代碼就能夠了：

var fs= require('fs'); var crypto = require('crypto'); function md5File(path, callback) { fs.readFile(path, function(err, data) { if (err) return; var md5Value= crypto.createHash('md5').update(data, 'utf8').digest('hex'); callback(md5Value)； }); }

 

可是對於瀏覽器，若是不能使用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： 查看

使用方法很是簡單：

<script src="bower_components/browser-md5-file/dist/browser-md5-file.js"></script>
 
var el = document.getElementById('upload'); el.addEventListener('change', handle, false); function handle(e) { var file = e.target.files[0]; browserMD5File(file, function (err, md5) { console.log(md5); // 97027eb624f85892c69c4bcec8ab0f11
 }); }

 

詳細的使用方法能夠查看Github中的文檔。

關於瀏覽器兼容性，因爲使用的HTML5 api，因此只能兼容到一下瀏覽器：

• IE10+
• Firefox
• Chrome
• Safari
• Opera

還有一點，因爲須要把文件讀取到內存，md5大文件會性能較差。