Edited at

ブラウザでローカルファイルのチェックサムを算出する方法

More than 3 years have passed since last update.


デモ

Checksum with JavaScript in browser

このデモではユーザーが選択したローカルファイルのチェックサムを md5, sha1, sha256, sha512 ハッシュ関数を使って計算して hex, binary, base64 エンコーディングして表示している。


動作確認環境


  • Win7 IE11

  • Win7 Chrome 44

  • Win7 Firefox 40.0.3

  • Mac OSX Chrome 44

  • Mac OSX Safari 8.0.8

  • Mac OSX Firefox 40.0.3

  • Android Chrome 44

  • iOS 8.4.1 Safari


使ったパッケージ

webpackやbrowserifyといったバンドラーがビルトインとして用意しているcryptobufferモジュール1を使う。これらのパッケージはwebpack/browserifyともに内部的に同じパッケージに依存しているが、バージョンが違うため若干挙動が異なる。


webpack/webpack at v1.12.0


substack/node-browserify at 11.0.1


コード

この書き方をするとバージョンによる挙動の違いがない。

var crypto = require('crypto')

var $input = document.querySelector('input[type=file]')
var algorithm = 'md5'
var encoding = 'base64'

$input.addEventListener('change', function () {
var file = $input.files[0]
if (file == null) return

var r = new FileReader()
r.onerror = function (err) {
console.error(err)
}
r.onload = function () {
var buf = new Buffer(r.result)
var hash = crypto.createHash(algorithm)
hash.update(buf)
console.log(hash.digest(encoding))
}
r.readAsArrayBuffer(file)
}, false)



  1. FileReader#readAsArrayBuffer() でファイル内容を ArrayBuffer として読む。

  2. 得られた ArrayBufferBuffer でラップする。


  3. crypto.createHash()Hash インスタンスを作る。


  4. Hash#update()Buffer インスタンスを渡しハッシュの内容を更新する。


  5. Hash#digest() で目的のエンコーディングの結果を得る。





  1. nodeのコアモジュールをブラウザ用に書き換えたモジュール