先週、華氏度と摂氏度の換算をする WEB ページを作ってみて、HTML と JavaScript だけでページを作れば、サーバなしで簡単なツールを作れることが分かった。
そこで、いくつか同じように WEB ページで動くツールを作ってみている。今日は、ローカルファイルの MD5 ハッシュ値を計算するツール（ページ）を紹介しよう。
cf. MD5ハッシュ値の計算
ページを作るにあたっては、次のページとそこからリンクされているページを参考にした。
cf. ローカルバイナリファイルからMD5ハッシュ値を計算する
特にローカルファイルの扱い方が参考になった。また、MD5 ハッシュ値の計算は、次のページで公開されている JavaScript のライブラリをそのまま使わせてもらった。
最後に HTML のソースを載せておく。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MD5 calculator</title>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">
const handleFileSelect = (evt) => {
const files = evt.target.files;
const output = document.getElementById("list");
output.innerHTML = "<ul>";
for (let i = 0, f; f = files[i]; i++) {
const reader = new FileReader();
reader.onload = ((theFile) => {
return (e) => {
const hexdigest = MD5_hexhash(e.target.result);
output.innerHTML += "<li>" + hexdigest + " " + theFile.name + "</li>";
}
})(f);
reader.readAsBinaryString(f);
}
output.innerHTML += "</ul>"
}
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("files").addEventListener("change", handleFileSelect, false);
}, false);
</script>
</head>
<body>
<h1>MD5 calculator</h1>
<input type="file" id="files" name="files[]" multiple /><br />
<output id="list"></output>
</body>
</html>