日: 2018年8月12日

HTMLとJavaScriptでMD5ハッシュ値の計算

先週、華氏度と摂氏度の換算をする WEB ページを作ってみて、HTML と JavaScript だけでページを作れば、サーバなしで簡単なツールを作れることが分かった。
そこで、いくつか同じように WEB ページで動くツールを作ってみている。今日は、ローカルファイルの MD5 ハッシュ値を計算するツール（ページ）を紹介しよう。

　cf. MD5ハッシュ値の計算

ページを作るにあたっては、次のページとそこからリンクされているページを参考にした。

　cf. ローカルバイナリファイルからMD5ハッシュ値を計算する

特にローカルファイルの扱い方が参考になった。また、MD5 ハッシュ値の計算は、次のページで公開されている JavaScript のライブラリをそのまま使わせてもらった。

　cf. 高度な 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>