ファイル選択フォームで選んだファイルの内容をFileReaderオブジェクトを使って書き出す

ダイアログから選択されたファイルを読む込むために FileReaderオブジェクトを作成する。

非同期処理 ⇒ コールバックで結果を得る（ ex. FileReader() ）

同期処理　 ⇒ ブロック(処理が終わるまで待つ)（ ex. alert() ）

コールバックとイベントの主な違いは、コールバックは基本的には1回だけ呼ばれるのに対し、イベントは何回でも発生する可能性があるという点。

<form name="form01" action="">
    <div>
        <input name="file" type="file" />
    </div>
    <p id="content"></p>
</form>

let formInput = document.forms.form01.file;

formInput.addEventListener("change", () => {
    var selectedFile = formInput.files[0];
    var fileReader = new FileReader();

    // ファイルを読み込み終わった後の処理
    fileReader.addEventListener("load", function () {
        const content = document.getElementById("content");

        // resultプロパティで読み込んだ内容を参照する
        content.innerText = fileReader.result;
    });
    // ファイルを文字列として読み込みます。
    fileReader.readAsText(selectedFile);
});