ダイアログで選んだファイルを確かめる - JavaScriptのチュートリアル

このレッスンでは、 ファイルのダイアログを開いて、 その中で選んだファイルを調べると いうことやってみます。 今、フォーム要素、name が form ですね。 その中に form 要素は1個だけ、 input 要素で、 type が file となっています。 そうすると、これは、 ファイルのダイアログを開くボタンと というふうになります。 そして name が file ですね。 また、JavaScriptコードは 1行も書いていないんですけれども、 これでも、ダイアログを開くという機能は ついています。 確認しましょう。 「type」が「file」の「input」要素は、 このような「ファイルを選択」という ボタンなっています。 右側には「選択されていません」と ありますけれども、 ダイアログを開いてファイルを選択すれば、 その選択されたファイルの名前が ここに出てきます。確かめましょう。 ファイルを選択して、 そして今、練習している フォルダなんですが、 ここにテキストファイルが1個あります。 選んで、こんな内容なんですけども、 「開く」と、すると、 JavaScriptコードがありませんので、 後の処理は特にないんですけれども、 選んだファイルの名前が ここに出てきました。 ここにスクリプトを書き込んで、 選んだファイルの情報を取り出すと という事をやってみます。 まずはフォームの要素を取得しましょう。 変数 var の form というふうにして、 document.dot.forms ですね。 その中から、フォームの名前、form です。 ということで、 フォームの要素が取得できます。 そうしたら、ここから今度は input 要素ですね。 type が file の input 要素。 ボタンになりますけれども、 file にしましょう、名前は。 form から .file ということで、 file の要素が取得できました。 さて、あのボタンをクリックしたら というのは、 フォーム要素の変更にあたりますので、 イベントリスナーで、 change というイベントの リスナー関数を設定します。 file に対して、addEventListener そしてイベントは change と。 リスナー関数は名前のない関数、 無名関数で書くことにしましょう。…