JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

JavaScriptにおけるFileとFileReaderとは？

JavaScriptでは、<input type="file">要素を使うことで、ユーザーにローカルファイルを選択させることができます。選択されたファイルはFileオブジェクトとして取得でき、ファイル名・サイズ・MIMEタイプなどの基本情報へアクセス可能です。

さらに、FileReaderオブジェクトを利用すれば、選択されたファイルの中身を非同期で読み込み、テキストやデータURLとして扱うことができます。

サンプルコード

以下は、JavaScriptでFileとFileReaderを使用して、ファイルの詳細情報を表示しつつ、中身を読み込む実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptのFileとFileReader</h1>
<input type="file" accept="text/*" onchange="displayFile(this)" />
<div class="result"></div>
<br />
<div class="sample"></div>
<h3>上のボタンからファイルを選択すると、詳細と内容が表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    function displayFile(input) {
        let file = input.files[0];
        resEle.innerHTML += "ファイル名 = " + file.name + "<br>";
        resEle.innerHTML += "ファイルサイズ = " + file.size + " バイト <br>";
        resEle.innerHTML += "ファイルタイプ = " + file.type + "<br>";
        var Reader = new FileReader();
        Reader.readAsText(file);
        Reader.onload = function () {
            sampleEle.innerHTML += Reader.result;
        };
        Reader.onerror = function () {
            sampleEle.innerHTML += Reader.error;
        };
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

「ファイルを選択」ボタンをクリックして任意のテキストファイルを選ぶと、ファイル名・サイズ・タイプが表示され、同時にファイルの中身も読み込まれて出力されます。

【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

コードのポイント解説

  • input.files[0]：ファイル入力欄で選択された最初のファイルをFileオブジェクトとして取得します。
  • file.name / file.size / file.type：それぞれファイル名、バイト数でのサイズ、MIMEタイプ（例：text/plain）を表します。
  • new FileReader()：ファイルを読み込むためのFileReaderインスタンスを生成します。
  • readAsText(file)：ファイルをテキスト文字列として非同期に読み込みます。他にも画像などをBase64形式で読むreadAsDataURL()などがあります。
  • onloadイベント：読み込みが正常に完了した際に発生し、Reader.resultプロパティから読み込んだ内容を取得できます。
  • onerrorイベント：読み込み中にエラーが発生した場合に呼び出され、Reader.errorでエラー内容を確認できます。

このように、File APIとFileReaderを組み合わせることで、ブラウザ上だけでローカルファイルの情報取得や内容の読み込みが簡単に実現できます。CSVプレビュー機能やテキストエディタなど、さまざまなWebアプリケーションで活用できる基本的かつ重要な技術です。

  1. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. 【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法

    JavaScriptにおけるインポートとエクスポートの名前変更とはJavaScriptのESモジュールでは、asキーワードを使うことで、エクスポートやインポートの際に関数や変数に別名を付けることができます。モジュール側の元の名前はそのまま維持しながら、利用する側では分かりやすい名前で扱えるため、コードの可読性と保守性が向上します。注意：このサンプルを実行するには、ローカルホストサーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーの制限によりモジュールの読み込みが失敗する場合があるためご注意ください。コード例index.html<!DOCTYPE html>