HTMLでFile APIを使ってローカルファイルを読み込む方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでFile APIを使ってローカルファイルを読み込む方法について解説しています。File APIを使うことで、ファイルに関する操作がかのあです。対応可能なブラウザなどについても覚えておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLでFile APIを使ってローカルファイルを読み込む方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

File APIを使ってローカルファイルを読み込む方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

File APIとは

File APIとは、ローカルストレージに保管されたファイルをJavaScriptから操作するためのAPIです。

具体的には、下記の項目を実現するための30個のメソッドやプロパティが用意されています。

  • ファイルのプロパティ値の取得や読み込み
  • 書き込み
  • 新規作成

 

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

File APIの使い方と注意点

基本的な使い方

ファイルを読み込むときは以下の1行をHTMLに記述することで配置可能です。

<input type="file" id="inputFile">

以下の通りファイルを読み込むためのフォームが表示されます。

ファイルを選択した後に 例えばボタンを追加してdocument.getElementById(“inputFile”)を実行することで、簡単にファイル情報をオブジェクトとして取得可能です。

ここかファイルのプロパティをブラウザに出力させることができたり、ファイルをサーバーに送信することができます。

また、 FileReader()を定義することでファイルをブラウザ上に表示させることもできるでしょう。

 

対応可能なブラウザに注意

JavaScriptのAPIなので、使用しているブラウザのバージョン、アプリによって挙動に左右される点に注意が必要です。

そのためFile APIを使う際には使う予定のブラウザに合わせて実装を考える必要があります。

以下のCan I use…ではJava ScriptのAPI名を検索すると対応ブラウザの一覧を出力することができるため、調べてみるといいでしょう。

https://caniuse.com/

 

File APIを使ってローカルファイルを読み込んでみよう

それでは実際にサンプルでFile APIを使ってみましょう。

今回はファイルを読み込んだら画像ファイルを表示させてファイル情報を出力させるページを作ってみます。

以下のHTMLを適当なフォルダに保存します。

<html>
    <head>
        <meta charset="utf-8">
        <title>File loader</title>
    </head>
    <body>
        <input type="file" id="inputFile">
        <br>
        <img id="viewImage">
        <table border="1">
            <thead>
                <tr>
                    <th colspan="2">File Info</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ファイル名</td>
                    <td id="fileName"></td>
                </tr>
                <tr>
                    <td>ファイルの種類</td>
                    <td id="fileType"></td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
        window.addEventListener("change", () => {
            var inputFile = document.getElementById("inputFile").files[0];
            console.log(inputFile);
            if (inputFile.type.indexOf("image") == 0) {
                var reader = new FileReader();
                reader.onload = function(evt){
                    document.querySelector("#viewImage").src = reader.result;
                }
                reader.readAsDataURL(inputFile);
            }
            document.getElementById("fileName").innerHTML = inputFile.name;
            document.getElementById("fileType").innerHTML = inputFile.type;
        });
    </script>
</html>

実際になにか画像ファイルを選択して読み込むと、以下の用に読み込んだ画像とその画像のファイル情報の表を出力可能です。

ちなみに、今回は画像以外のファイルはファイル情報の表だけが出力されるプログラムとなっています。

 

執筆してくれたメンター

メンター 三浦

モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。

TechAcademyジュニアではPythonロボティクスコースを担当しています。

好きな言語はpython, Node.js

 

大石ゆかり

HTMLでFile APIを使ってローカルファイルを読み込む方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。