[JavaScript] ファイル名とファイルの中身を取得する

ブロックチェーン上に上げるために、ファイル名とファイルの中身を取得したい。

html

1
2
3
4
5
6
        <div class="control">
            <input id="file" name="file" type="file" />
        </div>
        // 省略
<p>Please press the button.</p>
<input type="submit" class="button is-link" id="btn" value="authorize" onclick="OnButtonClick();">

view: buttonを押すと処理を実行するように書いている(onChangeではない)

reader.readAsTextとした後に、reader.onload(ファイルの読み込み完了) 後に処理をする。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let reader = new FileReader();
let input = ""
 
function OnButtonClick() {
    input = document.getElementById("file").files[0]
    reader.readAsText(input, 'UTF-8')
    reader.onload = ()=> {
        main();
    };
                 
}
async function main() {
    console.log(input.name)
    console.log(reader.result);
}

なるほどー、割と簡単にできたなー