はじめに

Web上で画面遷移をせずにファイルのハッシュ値を表示する方法を探していたところ、なかなか見つけることができませんでした。試行錯誤を行った結果、表示できるようになったためその方法を記載します。

完成画面

ここでは以下のtest.txtをSHA256でハッシュしています。

test.txt

test

プログラム

以下のようなフォルダ構成とし、webtest.pyを実行すると動きます。
root/
　├ templates/
　│　　└index.html
　└ webtest.py

webtest.py

import hashlib
from flask import Flask, request
from flask import render_template

app = Flask(__name__,template_folder='./templates')


@app.route("/")
def index():
  return render_template("index.html")

@app.route("/upload_file", methods=["POST"])
def upload_file():
  file = request.data
  hash = hashlib.sha256(file).hexdigest()
  return hash, 200

if __name__ == "__main__":
  app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ファイルハッシュ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <form action="">
        <input type="file" id="f1" name="file1">
        <p id="hash"></p>
    </form>
  
<script type="text/javascript">
    var element_file = document.getElementById('f1')

    element_file.addEventListener("change" , function(e){
        var file_list = element_file.files;
        var file = file_list[0];
        var file_reader = new FileReader();

        file_reader.readAsArrayBuffer(file);
        file_reader.onload = function(e){

            // Uint8Arrayを作成
            var ary_u8 = new Uint8Array(file_reader.result);

            //送信
            $.ajax({
                url: "/upload_file",
                type: "POST",
                data: ary_u8 ,
                contentType: false,
                processData: false,
                success: function(response) {
                    $("#hash").text(response);
                },
            });
        };

    })
</script>
</body>
</html>

終わりに

pythonやhtmlのプログラミングは初心者であるため、これだけのことを実装するために2日もかかってしまいました。もし、同じような問題を抱えている方は参考にしてみてください。