Navigate
X

File APIを使ってローカルファイルを読み込む

HTML5で追加されたFile APIと呼ばれる機能を使うと、ブラウザ上で
ローカルファイルを読み込んだりすることが簡単にできます。

ユーザがローカルファイルを選択するには大きく2つの手段があります。

  • HTMLのファイル選択フォーム(inputタグにtype=”file”とする)で指定する
  • ドラッグ＆ドロップでファイルを指定する(ドラッグ&ドロップAPIを利用する)

今回はシンプルにファイル選択フォームを使ってローカルファイルを選択し、
選択したファイルのファイル情報をブラウザ上に表示する方法について紹介したいと思います。
（2つ目のドラッグ＆ドロップに関する説明は次回解説致します！）

詳細は続きからご覧下さい。

まずはファイル選択フォームを用意します。

<input type="file" id="MyFile"  onchange="checkFiles()">

typeに“file”と指定して、ファイル選択フォームに設定します。
idにはJavaScriptから参照できるようにユニークな識別子を指定して下さい。
そしてonchangeでファイルが選択された場合に呼び出されるメソッドを指定します。

呼び出される処理はcheckFilesメソッドとして以下のように定義します。

<script type="text/javascript">
function checkFiles() {
   var fs = document.getElementById("MyFile").files;
   var disp = document.getElementById("disp");
   disp.innnerHTML = "";
   var f = fs[0];
   disp.innerHTML += "name : " + f.name + "    type : " + f.type + "    size: " + f.size + " byte " + "<br>";
}
</script>

3行目でgetElementByIdメソッドを使ってinput要素のfilesプロパティを参照し、そのインスタンスをfsとしています。
このfsにはファイル選択ダイアログで選択したファイルの情報が配列で格納されます。
4行目で表示領域のインスタンスを取得しています。
そして6行目でfs配列の0番目の要素のインスタンスを取得し、7行目で選択したファイル情報の詳細を表示しています。

filesプロパティのインスタンスはFileと呼ばれるオブジェクトで、
Fileオブジェクトのプロパティは以下のようなものがあります。

[table “145” not found /]

複数ファイルをサポート

前述のサンプルは一度にファイルを1つしか選択することができませんでしたが、
inputタグにmultiple属性を付けておくと、一度に複数のファイルを指定する事ができます。

<input type="file" id="file" multiple onchange="checkFiles()">

ダイアログで指定した要素数はlengthメソッドで取得する事ができますので、
以下のようにすれば、選択した各ファイルの情報を取得することができます。

<script type="text/javascript">
function checkFiles() {
   var fs = document.getElementById("MyFile").files;
   var disp = document.getElementById("disp");
   disp.innnerHTML = "";
   for (var i=0; i<fs.length; i++) {
      var f = fs[i];
      disp.innerHTML += "name : " + f.name + "    type : " + f.type + "    size: " + f.size + " KB " + "<br>";
   }
}

6、7行目でlengthメソッドを使って取得したファイルの個数分、そのファイル情報を取得して表示しています。

以上で選択したファイルのファイル情報を表示することができました。
次回は選択したファイルの内容を表示する方法についてご紹介します。

Tags: File API
kseto: