前几天接到一个奇怪的需求,要在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。

使用方法非常简单:

<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大文件会性能较差。

转载http://forsigner.com/2016/03/04/browser-md5-file/

在浏览器端获取文件的MD5值的更多相关文章

  1. swift 获取文件的Md5值

    获取文件的Md5值的方法如下 func md5File(url: URL) -> String? { let bufferSize = 1024 * 1024 do { //打开文件 let f ...

  2. iOS开发之获取文件的md5值

    我们经常有下载文件上的需求 为了安全我们经常需要对文件进行md5校验 那我就来给大家分享一个很方便的获取文件md5值得方法. 首先需要引用系统库文件 #include <CommonCrypto ...

  3. JAVA 获取文件的MD5值大小以及常见的工具类

    /** * 获取文件的MD5值大小 * * @param file * 文件对象 * @return */ public static String getMD5(File file) { FileI ...

  4. Android获取文件的MD5值

    package my.bag; import java.io.File; import java.io.FileInputStream; import java.math.BigInteger; im ...

  5. java获取文件的md5值

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  6. ios获取文件的MD5值

    一般我们在使用http或者socket上传或者下载文件的时候,经常会在完成之后经行一次MD5值得校验(尤其是在断点续传的时候用的更 多),校验MD5值是为了防止在传输的过程当中丢包或者数据包被篡改,在 ...

  7. java 中,如何获取文件的MD5值呢?如何比较两个文件是否完全相同呢?

    /** * Get MD5 of one file:hex string,test OK! * * @param file * @return */ public static String getF ...

  8. 获取文件的MD5值,比较两个文件是否完全相同

    代码: public class MD5Test { public static void main(String[] args) { String s1 = MD5Test.MD5Operation ...

  9. Java,如何获取文件的MD5值

    MessageDigest类封装得很不错,简单易用 不多说,直接上代码 import java.io.FileInputStream;import java.security.MessageDiges ...

随机推荐

  1. vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  2. tomcat启动命令行中文乱码

    1.找到${CATALINA_HOME}/conf/logging.properties 2.添加语句:java.util.logging.ConsoleHandler.encoding = GBK ...

  3. 2017-12-26--mysql(5.6.15),linux下安装使用

    本文档的目的是,指导使用者安装.配置.还原所需要用到的mysql数据库.仅提供linux版本服务器的安装说明,且linux版本为64位的Centos6.4.同时,会提供的mysql安装包(MySQL- ...

  4. Linux服务器 XAMPP后添加PHP和MYSQL环境变量

    编辑/etc/profile文件 在文件末尾添加两行代码 vi /etc/profile CentOS: PATH=$PATH:/opt/lampp/bin export PATH Ubuntu: e ...

  5. 进行分支切换时,出现error的修复方法

    进行分支切换时,出现如此错误,导致无法正常切换:error: The following untracked working tree files would be overwritten by ch ...

  6. 启动Weblogic问题集锦

    报错1:Could not obtain the localhost address. The most likely cause is an error in the network configu ...

  7. vue filters中使用data中数据

    vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...

  8. 将vmware虚拟机转换成qcow2格式的方法

    将vmware虚拟机转换成qcow2格式的方法 http://blog.51cto.com/13570993/2074071 关于qemu安装出现的问题 1.配置qemu是出现can't find p ...

  9. pip安装报错

    ERROR: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall.bat) python通过pip或者源码来安装某些模块时,这 ...

  10. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...