JavaScript入門[HTML5編]ファイルの選択

ファイル選択ダイアログを用いる

HTML5においては、inputタグでtype="file"が使えるようになりました。 ファイルを選択する場合に用いることができます。 以下の簡単なファイル選択スクリプトをご覧下さい。 選択したファイルのファイル名がalert表示されます。

＜サンプル＞

上記サンプルのスクリプトは以下の通りです。

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

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

obj1.addEventListener("change", function(evt){
  var file = evt.target.files;
  alert(file[0].name + "を取得しました。");
},false);
</script>

スクリプトの解説

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

まずはinputのtype属性で、「file」を指定します。 これでファイル選択ダイアログが出ます。id名「selfile」を付けています。

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

スクリプトの最初に、getElementByIdでinputタグを取得し、変数obj1に格納しています。

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

},false);

選択したファイルの情報を得るには、changeイベント内で行ないます。 addEventListener()でchangeイベントを追加します。

var file = evt.target.files;
alert(file[0].name + "を取得しました。");

ダイアログで選択したファイルの情報を得るには、event.target.filesで取得できます。 取得したファイルは配列の形式になります。これを変数fileに格納します。

その後、alert()を使ってファイル名を表示しています。ファイル名は配列.nameで取得します。 今回は１つのファイルしか選択できないので、配列の要素数は１つだけです。 よって配列の括弧内は0にします。

複数のファイルを選択する

複数のファイルを選択するには、inputタグにmultiple属性を記入します。 こうすれば、ファイル選択ダイアログで複数のファイルを選択できます。 以下のサンプルでは、選択した複数のファイルのファイル名を順にアラート表示していきます。

＜サンプル＞

このサンプルのスクリプトは以下の通りです。

<input type="file" id="selmulti" multiple>

<script>
var obj2 = document.getElementById("selmulti");

obj2.addEventListener("change", function(evt){
  var file = evt.target.files;
  var num = file.length;
  
  for (var i = 0 ; i < num ; i++ )
  {
    alert(file[i].name);
  }
},false);
</script>

event.target.filesで取得する情報は配列の形式ですから、 lengthを使って選択したファイル数を取得できます。 後はfor文を使って、一つずつファイル名を表示しています。