File　APIとはクライアント（ローカル）上にあるファイルをスクリプトを使って読み書きすることができるようにするものです。ただし、スクリプトで任意のファイルを選択することはできず、ユーザーが選択したファイルが対象となります。 操作の基本となるFileオブジェクト ユーザーが選択したファイルを表すFileオブジェクトを生成することが、読み書き操作の基本になります。

HTML

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

JavaScript

window.addEventListener('DOMContentLoaded', function() {
  // ファイルが指定されたタイミングで、その情報を表示
  document.querySelector("#file").addEventListener('change', function(e) {
    // 指定されたファイルを取得
    var input = document.querySelector('#file').files[0];
    // ファイル情報をページに反映
    document.querySelector('#name').innerHTML = input.name;
    document.querySelector('#type').innerHTML = input.type;
    document.querySelector('#size').innerHTML = input.size / 1024;
    document.querySelector('#urn').innerHTML = input.urn;
    document.querySelector('#modified').innerHTML = input.lastModifiedDate;
  }, false);
});

上記ではinputに選択されたファイルのFileオブジェクトが作られる。 Fileオブジェクトにはファイル情報を取得するためのプロパティ・メソッドがあります。