画面遷移せずにファイルをアップロードしハッシュ値を表示する方法

最終更新日 2023年10月29日投稿日 2023年10月29日

はじめに

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日もかかってしまいました。もし、同じような問題を抱えている方は参考にしてみてください。

新規登録して、もっと便利にQiitaを使ってみよう

あなたにマッチした記事をお届けします
便利な情報をあとで効率的に読み返せます

@akebi_mh

2023-10-29 04:27

HTMLとJavaScriptのみでも可能です。

index.html

<input type='file' id='file'>
<p id='hash'></p>

<script>
const digestMessage = async m => Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(m)))).map(v => v.toString(16).padStart(2, '0')).join('');

document.getElementById('file').addEventListener('input', e => {
  const reader = new FileReader();
  reader.readAsBinaryString(e.target.files[0]);
  reader.addEventListener('loadend', () => digestMessage(reader.result).then(v => document.getElementById('hash').textContent = v));
});
</script>