JavaScript入門[HTML5編]ファイル情報の取得

ファイル情報を読み込むサンプル

ファイル情報のうちファイル名の取得方法は、最初のページで見ることができました。 サイズとファイル形式も同じようにして取得できます。

event.target.files[].name

ファイル名を取得します。

event.target.files[].size

ファイルサイズを取得します。単位はバイトです。

event.target.files[].type

ファイルのMIMEタイプを取得します。

以下のサンプルでは、ファイル選択ボタンで選択したファイル（複数可）のファイル名・ファイルサイズ・ファイル形式を調べ、 divタグ内に書き出すようにしています。

ファイル情報を取得するサンプルスクリプト

上のサンプルのスクリプトは以下のようになっています。

<input type="file" id="selfile" multiple><br>
<div id="property"></div>

<script>
var obj1 = document.getElementById("selfile");
var obj2 = document.getElementById("property");

obj1.addEventListener("change", function(evt){
  var file = evt.target.files;　//選択ファイルを配列形式で取得
  var num  = file.length;       //選択されたファイル数を格納
  var str = "";                 //ファイル情報を格納する変数
  
  for ( var i = 0 ; i < num ; i++ )
  {
    str += "[" + parseInt(i+1) + "番目のファイル]<br>";
    str += "ファイル名：" + file[i].name + "<br>";
    str += "ファイルサイズ：" + file[i].size + "byte<br>";
    str += "ファイルタイプ：" + file[i].type + "<br>";
    if ( i < num-1 ) str += "<br>";
  }

  obj2.innerHTML = str;
  obj2.style.backgroundColor = "#cccccc";
  
},false);
</script>

このスクリプトを詳しく見ていきましょう。

HTML部分

<input type="file" id="selfile" multiple><br>
<div id="property"></div>

まず、ファイル選択ダイアログを出します。今回は複数のファイルを選択できるよう、multipleを指定しています。

divタグは、ファイル情報を書き出すためのものです。id名「property」を付けています。

DOM要素の取得

var obj1 = document.getElementById("selfile");
var obj2 = document.getElementById("property");

続いてscript部分を見ていきます。最初にgetElementById()で、ファイル選択ボタンとdivタグを取得しています。 変数obj1,obj2にそれぞれ代入しました。

ファイルが選択された時

obj1.addEventListener("change", function(evt){

},false);

ファイルが選択された時はchangeイベント内に記入するというのは、もう繰り返し出て来たのでバッチリでしょう。 addEventListener()でchangeイベントを追加します。

各種変数の宣言と代入

var file = evt.target.files;
var num  = file.length;
var str = "";

ここからchangeイベント内での処理です。最初に各種変数を宣言＆代入しています。 変数fileは、ファイル選択ダイアログで選択したファイルを配列の形で格納しています。

変数numは、選択ファイル数を代入します。変数fileは配列ですから、lengthを使って要素数を取得できます。

変数strは、ファイル情報を格納していきます。宣言だけでは先頭に不要なものが付くので、 空の文字列を代入しておきます。

ファイル情報の取得

for ( var i = 0 ; i < num ; i++ )
{
  str += "[" + parseInt(i+1) + "番目のファイル]<br>";
  str += "ファイル名：" + file[i].name + "<br>";
  str += "ファイルサイズ：" + file[i].size + "byte<br>";
  str += "ファイルタイプ：" + file[i].type + "<br>";
  if ( i < num-1 ) str += "<br>";
}

今度はfor文を使って、ファイルを１つずつ扱っていきます。繰り返し回数は「0～num-1」です。 「str+=」という表記は、既に格納している文字列に、右辺の文字列を追加するという意味です。

１行目は「何番目のファイルか」を格納します。「i」は数値と思っていると思わぬエラーが出ます。parseInt()を使って数値に変換します。

２行目はファイル名、３行目はファイルサイズ（単位はバイト）、４行目はファイルタイプを取得して、変数strに文字列として追加します。

最後に、各ファイルの間を１行空けるためにbrタグを入れていきます。 しかし最後のファイルの下には空白を入れる必要が無いので、if文で最後は処理を飛ばすようにしています。

innerHTMLで書き出し

obj2.innerHTML = str;
obj2.style.backgroundColor = "#cccccc";

最後に、innerHTMLを使って変数strをdivタグ内に書き出します。 ついでにdivタグ内に色を付ける処理をしています。背景色を薄い灰色に指定しました。