【入門編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の関数の使い方、をみていきましょう。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

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