【入門編9】JavaScriptのファイル読み込み方法を理解しよう

JavaScript入門

本記事ではJavaScriptでファイルを読み込む方法を解説します。

ブラウザからファイルを読み込み、そのファイルをプログラムで操作する、のは良くおこないます。

今回はあくまで基礎的な部分のみですが、ファイルを読み込む方法を紹介します。

JavaScriptでのファイル読み込み方法

JavaScriptでのファイル読み込み方法を紹介します。

以下の順番で、解説していきましょう。

  • ファイル入力画面を設置
  • ファイルを取得する
  • ファイルの中身を表示する

JavaScriptだけでなくHTMLもいじる必要があり、難しい部分もあるかもしれません。

そのため1つ1つ丁寧に解説していきます。

ファイル入力画面を設置

まずはブラウザに、ファイル入力画面を設置する方法を解説します。

○コード例

<!DOCTYPE html> <head> <title>テスト画面</title> </head> <body> <form name="myform"> <input name="myfile" type="file"> </form> <script> </script> </body> </html>

ユーザー側から入力するものを設置する場合「inputタグ」を使います。

ファイル入力を行う場合は「type=”file”」としてください。

最後にプログラムで入力内容を操作できるよう「formタグ」を使います。

これを実行すると、ブラウザ上にファイルを入力できる画面が表示されます。

ファイルを取得する

ユーザーが入力したファイルを、JavaScriptで取得する方法をみていきましょう

○コード例

<!DOCTYPE html> <head> <title>テスト画面</title> </head> <body> <form name="myform"> <input name="myfile" type="file"> </form> <script> var form = document.forms.myform;  form.myfile.addEventListener('change', function(e) {     // ファイルを取得する     var result = e.target.files[0];     console.log(result); }) </script> </body> </html>

○実行結果

まずはformタグを付けた箇所を、JavaScriptで取得する必要があります。

document.forms.{name属性}というように記述することで、formタグ部分が取得できます。

次にaddEventListenerメソッドを使います

addEventListenerメソッドは、特定のイベントが発生したときに動きます。

ファイルを入力するときは、メソッドの引数に「change」を入力してください。

ファイルが入力されたとき、addEventListenerメソッドの中の処理が動きます。

e.target.files[0]により、入力されたファイルを取得します。

コンソールログを見てみると、ファイルが取得できたことが分かります。

ファイルの中身を表示する

最後にファイルの中身の表示方法をみていきましょう。

○コード例

<!DOCTYPE html> <head> <title>テスト画面</title> </head> <body> <form name="myform"> <input name="myfile" type="file"> </form> <script>  var form = document.forms.myform;  form.myfile.addEventListener( 'change', function(e) {     // ファイルを取得する     var result = e.target.files[0];      // ファイルを読み込む     var reader = new FileReader();     reader.readAsText(result);      // ファイルが読み込まれた後の処理     reader.addEventListener('load', function() {         document.write(reader.result);     })  }) </script> </body> </html>

○読み込んだtxtファイルに書かれた内容

これはファイルの中身です。

○実行結果

ファイルを読み込む場合は、FileReaderオブジェクトを使います。

FileReaderオブジェクトにはreadAsTextメソッドというものがあります。

readAsTextメソッドは、ファイルの中身を取得します。

そして再び、addEventListenerメソッドを使います。

addEventListenerメソッドの第一引数を「load」にすると、ファイルが読み込まれたときに動くようになります。

「reader.result」によってファイルが表示できます。

これが、JavaScriptでファイルを表示する一連の流れとなります。

まとめ

本記事では、JavaScriptでファイルを読み込む方法を解説しました。

ブラウザから入力されたファイルを、プログラムでどんな風に読み込むのか、お分かり頂けたかと思います。

ブラウザから入力されたデータを、JavaScriptで操作するのは、よく行うのでやり方を覚えておきましょう。

addEventListenerメソッドの使い方などが分かると、プログラミングが楽しくなりますよ

次回はJavaScriptの関数の使い方、をみていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
Visited 81 times, 2 visit(s) today
READ  【入門編2】JavaScriptで簡単な計算を行ってみよう

コメント

タイトルとURLをコピーしました