Blog
HTML5資料室 » FileAPI

FileAPI

Last modified by fukudayasuo on 2015/08/31, 16:15

FileAPIとは

FileAPIとはHTML5で追加された、Webアプリケーション上でローカルのファイルを扱うためのAPIです。

参考: File API -W3C

FileAPIの各ブラウザの対応状況(window.FileReaderがあるかどうか)

ブラウザFileReader対応状況
IE9以下×
IE 10,11
Edge(v20)
Chrome(v44)
Firefox(v39)
Safari(v5.1.7)×
Opera(v12.12)

input type="file"

type属性に"file"を指定したinput要素から、ローカルのファイルを選択することが出来ます。
<input type="file" name="upload-file">
file-api-input-blank.png

ブラウザによっては、input要素にローカルのファイルをドラッグしてドロップすることでファイルを選択することができます。

ドラッグ&ドロップでファイル選択できるか。

ブラウザinput type="file"にファイルをドロップして選択
IE9以下×
IE 10,11×
Edge(v20)×
Chrome(v44)
Firefox(v39)
Safari(v5.1.7)
Opera(v12.12)×

input type="file"の要素の値(value)をJavaScriptで任意のものに変更することはできません。空文字のみ設定可能です。空文字を設定した場合は、ファイルが選択されていない状態になります。

var fileInput = $('[name="upload-file"]')[0];
fileInput.value = ''; // ファイルが選択されていない状態になる

FileReaderによるファイルの中身の取得

input要素でtype="file"を指定した要素から、ファイル(File)のリスト(FileList)を取得できます。multiple指定をしている場合は複数のファイルを選択できます。input要素から取得したファイルは以下のようなオブジェクトです。

var fileInput = $('[name="upload-file"]')[0];
var fileList = fileInput.files;
console.log(fileList);

file-api-FileList.png

FileAPI対応ブラウザの場合、ファイルの中身はFileReader使って非同期で取得することができます。以下は、ファイルの中身を取得するメソッドです。

  • FileReader.readAsArrayBuffer(Blob|File)
    • バッファに読み込まれた生のバイナリデータを指すArrayBufferを取得
  • FileReader.readAsDataURL(Blob|File)
    • ファイルのデータを示す"data:"で始まるURLを取得
  • FileReader.readAsText(Blob|File)
    • バッファに読み込まれた生のバイナリデータを文字列で解釈したものをを取得

FireReaderにはonabort,onerror,onload,onloadstart,onloadend,onprogressのイベントハンドラがあり、取得したデータはイベントハンドラを使って取得します。

以下、読み込まれたファイルが画像ファイルならimg要素を生成、それ以外なら中身をテキストとして読み込んで表示する例です。

var file = $('input:first')[0].files[0];
// FileReaderのインスタンスを生成
var reader = new FileReader();

if (file.type.match('image.*')) {
 // 画像ファイルの場合
 // onloadハンドラ
 reader.onload = function(e) {
   // 取得した結果を表示
   var $img = $('<img src="' + e.target.result + '">');
    $('.result').append($img);
  };
 // ファイルの中身をデータURLとして取得
 reader.readAsDataURL(file);
} else{
 // onloadハンドラ
 reader.onload = function(e) {
     // 取得した結果を表示
     var $p = $('<p></p>');
      $p.text(e.target.result);
      $('.result').append($p);
  };
 // ファイルの中身(テキスト)を取得
 reader.readAsText(file);
}

ファイルのドロップ

ローカルファイルをDOM要素にドラッグ&ドロップしたとき、dropイベントハンドラでドロップされたファイルを取得することが出来ます。

$('.dropTarget').bind('drop', function(e){
 // デフォルト動作(ブラウザでファイルを開く)をキャンセル
 e.preventDefault();
 var file = e.originalEvent.dataTransfer.files[0];
 if (!file) {
   return;
  }
 var reader = new FileReader();
 // onloadハンドラ
 reader.onload = function(e) {
     // 取得した結果を表示
     var $p = $('<p></p>');
      $p.text(e.target.result);
      $('.result').append($p);
  };
  reader.readAsText(file);
});

$('.dropTarget').bind('dragover', function(e){
 // デフォルト動作(ブラウザでファイルを開く)をキャンセル
 e.preventDefault();
});

dropイベントでのファイル取得(dataTransfer.files)は、一部ブラウザは対応しておらず、上記コードは動作しません。
以下、対応状況です。

ブラウザdataTransfer.filesの対応状況
IE9以下×
IE 10,11×
Edge(v20)×
Chrome(v44)
Firefox(v39)
Safari(v5.1.7)○※
Opera(v12.12)

(※SafariはFileの取得は可能だがFileReader未対応のため中身の取得は不可)


Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.