画像表示アプリの作成(2) – 画像情報ファイルの作成

画像ファイル名は、撮影日時(＝ファイルの作成日時)をもとに、YYMMDD-HHMMSS 形式とする。
例えば、2012年9月8日午後2時31分31秒に撮影された画像ファイル名は、120908-143131.JPG となる。
(この命名規則は、画像変換ソフトの仕様による。)

HTML5のFileAPI機能による。複数ファイルを選択できるように、multiple を指定する。

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

ここもHTML5のFileAPI機能による。読込には readAsDataURL() を使う。また、HTML5では読み込んだコンテンツ(画像)を imgタグのsrcに直接指定することができる。

var reader = new FileReader();
reader.onload = function(event){
  $('#imgarea').append('<img src=' + event.target.result + ' width="100">');
}
reader.readAsDataURL(f);

実行例：30ファイル選択した場合。読み込みが完了すると、ダウンロードリンクが有効になる。

以下のようなJSONファイルを作成する。実際の画像ファイルは、例えば http://lifelog.main.jp/test/img/testnum01/120908-143100.jpg　などになる。

{
  "description": "Description",
  "location": "http://lifelog.main.jp/test/img/testnum01/",
  "item": [
    {
      "name": "120908-143100.jpg",
      "size": 10295,
      "dateTime": "2012-09-08T05:31:00.000Z",
      "dateStr": "2012/09/08",
      "timeStr": "14:31:00",
      "exif": null
    },
    {
      "name": "120908-143101.jpg",
      "size": 10229,
      "dateTime": "2012-09-08T05:31:01.000Z",
      "dateStr": "2012/09/08",
      "timeStr": "14:31:01",
      "exif": null
    },