format_list_bulleted
【JavaScript】File APIを用いたファイル操作方法ついて解説
最終更新日時:2020-05-03 12:50:49



JavaScriptローカルファイル(自分のパソコンにあるファイル)の読み込みやアップロードなどの操作をするには、File APIを使います。本記事では、JavaScriptのFile APIを用いたファイルの操作について説明します。

File APIとは

File APIとは自身の環境下でファイルを選択し、そのファイルをJavaScriptから操作できるAPIのことです。例えば、自分のパソコンにある画像ファイルをブラウザ上で確認することができたり、画像ファイルをブラウザ上で編集して、ダウンロードすることもできます。

File APIの使用方法

では、実際にFile APIを用いて、ファイルを操作します。

HTML上での操作

ブラウザ上でファイルを読み込む場合、HTMLファイル上でinputタグを用います。ここでinputタグのtype属性はfileに指定する必要があります。また複数のファイルを選択できるようにするためにはmultiple属性を使用します。次のコードを記述することでブラウザ上で次の画像のように表示されるはずです。

 <input type="file" id="inputfile"/>    <!--単一のファイルを読み込む場合-->
 <input type="file" id="inputfiles" multiple/> <!--複数のファイルを読み込む場合-->

JavaScript上での操作

HTML上だけではファイルを選択だけで何も起こりません。そこでJavaScriptファイル上でファイルを操作して、アクションを起こしたいと思います。ファイルを選択したら、addEventListenerメソッド(イベントはchange)でファイルが選択されるたびに処理していきます。次のコードのように複数選択した場合のファイルの中の情報をみてみましょう。

(index.html)

<html>
 <head>
   <meta http-equiv="content-type" charset="utf-8">
 </head>
 <body>
  <input type="file" id="inputfiles" multiple/> <!--複数のファイルを読み込む場合-->
  <script src="./test.js" ></script>
 </body>
</html>

(test.js)

var inputFiles = document.getElementById('inputfiles');
inputFiles.addEventListener("change", function(e) {
 console.log(e.target.files)
},false);

今回は2つのファイルを選択しました。 読み込んだ複数のファイルの情報は、console.log(e.target.files)で表示でき、コンソールには次のような情報が出力されます。ここでのFileListとFileはオブジェクトで、FileListでは選択したファイルの数がわかるlengthプロパティがあります。また、Fileオブジェクトには、次の表に示したプロパティがありファイル名を取得したり、ファイルのサイズを確認することができます。これらのプロパティを用いることで、例えば「画像しかアップロードできない」や「100KB以下のファイルしかアップロードできない」などの条件をつけることができます。

    

プロパティ名

内容

lastModifiedDate

ファイルの最終更新日(Dateオブジェクト)

name

ファイル名

size

ファイルのサイズ(byte)

type

ファイルのタイプ/拡張子

読み込んだファイルを出力する方法

読み込んだ画像を参照することができましたが、実際にブラウザ上に出力してみたいと思います。ここではFileReaderオブジェクトを使って、Fileオブジェクトのファイルを読み込みます。まず、FileReaderオブジェクトをインスタンス化します。

 var reader = new FileReader()

次に、FileReaderのメソッドを用いてファイルを読み込みます。FileReaderの読み込みのメソッドについては次の表にまとめてありますが、今回はreadAsDataURLメソッドを使って、ファイルのローカル上のURLを読み込みます。

 reader.readAsDataURL(file[0])

readAsArrayBuffer

ファイルをArrayBufferとして読み込む

readAsText

ファイルの中身をテキストとして読み込む

readAsDataURL

画像ファイルの場所をURLとして読み込む

読み込みが成功した場合(onloadイベント内)、読み込み結果としてresultプロパティがURLを持っています。これを、imageタグのsrc属性に代入することで画像を表示することができます。

 reader.onload = function() {
   image.src = reader.result;
 }

今までの説明を次のコードにまとめました。では、実際に実装してみます。

(index.html)

<html>
 <head>
   <meta http-equiv="content-type" charset="utf-8">
 </head>
 <body>
   <h2>画像の読み込み・出力</h2>
   <input type="file" id="inputfile" /> <!--単一のファイルを読み込む場合-->
   <img id="img" />
   <script src="./test.js" ></script>
 </body>
</html>

(test.js)

var inputfile = document.getElementById('inputfile')
var image = document.getElementById('img')

inputfile.addEventListener("change", function(e) {
 var file = e.target.files 
 var reader = new FileReader()
 reader.readAsDataURL(file[0])
 reader.onload = function() {
   image.src = reader.result;
 }
}, false)

実装結果が次の動画です。画像を選択し、ブラウザ上で出力することができました。

この記事のまとめ

File APIを用いたファイル操作について説明しました!最後に記事の要点をまとめてみましょう。

  • File APIを用いてJavaScriptでファイルの操作ができる。
  • inputタグのtype属性をfileに指定することでHTMLファイル上でファイルの選択ができる。また、multiple属性を使用することで複数のファイルを選択できる
  • FileListとFileはオブジェクトで、FileListでは選択したファイルの数がわかるlengthプロパティがあり、Fileオブジェクトには、ファイル名やサイズを確認できるプロパティがある
  • FileReaderオブジェクトを使って、Fileオブジェクトのファイルを読み込みができる
  • readAsDataURLメソッドやreadAsTextメソッドを使って、ファイルのローカル上のURLを読み込み、resultプロパティを用いて、ファイルを表示することができる

File API用いたファイル操作を是非活用してみましょう。