jQuery と querySelector が混ざって気持ち悪いけど

JSON データをローカルＰＣに置いて、jQuery を書いてデバッグしようと思った時、$.getJSON が使えないのは、結構辛い。

ＨＴＭＬ５で、inputタグ type="file" で読んで JavaScript のオブジェクトに格納する方法があるではないですか！

オブジェクトに格納する前に、読み込むファイルの情報を取得してみる。
のですが、ＤＯＭ の querySelector に頼ることになる。
DOM ときたら、window の addEventListener ということで書いてみると。。。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(){
   document.querySelector("#file").addEventListener('change', function(){
      // File API は有効か？
      if (window.File){
         var fs = document.querySelector('#file').files[0];
         var freader = new FileReader();
         freader.addEventListener('load', function(){
            $("#filename").text(fs.name);
            $("#type").text(fs.type);
            $("#size").text(fs.size);
            $("#lastModifiedDate").text(fs.lastModifiedDate);
            $("#relativePath").text(fs.webkitRelativePath);
            }, true);
         freader.readAsText(fs);
      }
   }, true);
});
</script>

HTML body は、以下のとおり。

ファイル選択：<input id="file" name="file" type="file" />
<br/><br/>
<table>
   <tr><td>ファイル名</td><td><span id="filename"></span></td></tr>
   <tr><td>Type</td><td><span id="type"></span></td></tr>
   <tr><td>size(byte)</td><td><span id="size"></span></td></tr>
   <tr><td>lastModifiedDate</td><td><span id="lastModifiedDate"></span></td></tr>
   <tr><td>webkitRelativePath</td><td><span id="relativePath"></span></td></tr>
</table>

実行した結果は、このようになる。

なるだけ、jQuery で書くと。。。

$(function(){
   $('#file').change(function(){
      if (window.File){
         var fs = document.querySelector('#file').files[0];
         var freader = new FileReader();
         freader.addEventListener('load', function(){
            $("#filename").text(fs.name);
            $("#type").text(fs.type);
            $("#size").text(fs.size);
            $("#lastModifiedDate").text(fs.lastModifiedDate);
            $("#relativePath").text(fs.webkitRelativePath);
         }, true);
         freader.readAsText(fs);
      }
   });
});

ファイルの内容を読む目的なら、
freader.readAsText(fs); は、charset を付けたオプションで
freader.readAsText(fs, 'UTF-8'); のように読むべきであるが、
ファイルのサイズや更新日を取得するなら今回の方法が使える。

実際にファイルの内容をオブジェクトに格納する時、、
FileReader の load イベント実行は、、
例えば、JSON データなら、、

freader.addEventListener('load', function(){
    data = $.parseJSON(freader.result);
}, true);

のように、result から取得する。