Directry List

Root Directory の TEMPORARY エントリの一覧を表示します。

【Source Code】

<ul id="filelist"></ul>

<script type="text/javascript">
function toArray(list)
{ return Array.prototype.slice.call(list || [], 0);
}

function errorHandler(e)
{   var msg = '';
    switch(e.code)
    {   case FileError.QUOTA_EXCEEDED_ERR:
            msg = 'QUOTA_EXCEEDED_ERR';
            break;
        case FileError.NOT_FOUND_ERR:
            msg = 'NOT_FOUND_ERR';
            break;
        case FileError.SECURITY_ERR:
            msg = 'SECURITY_ERR';
            break;
        case FileError.INVALID_MODIFICATION_ERR:
            msg = 'INVALID_MODIFICATION_ERR';
            break;
        case FileError.INVALID_STATE_ERR:
            msg = 'INVALID_STATE_ERR';
            break;
        default:
            msg = 'Unknown Error';
            break;
    };
    window.alert('Error: ' + msg);
}

function listResults(entries)
{ // Document fragments can improve performance since they're only appended
  // to the DOM once. Only one browser reflow occurs.
  var fragment = document.createDocumentFragment();
  entries.forEach(
    function(entry, i)
    { var img = entry.isDirectory ? '<img src="folder-icon.gif">' :
                                    '<img src="file-icon.gif">';
      var li = document.createElement('li');
      li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
      fragment.appendChild(li);
    });
  document.querySelector('#filelist').appendChild(fragment);
}

function onInitFs(fs)
{ var dirReader = fs.root.createReader();
  var entries = [];
  // Call the reader.readEntries() until no more results are returned.
  var readEntries =
    function()
    { dirReader.readEntries (
        function(results)
        { if (!results.length)
          { listResults(entries.sort());
          }
          else
          { entries = entries.concat(toArray(results));
            readEntries();
          }
        }, errorHandler);
    };
  readEntries(); // Start reading dirs.
}
window.webkitRequestFileSystem(window.TEMPORARY, 1024, onInitFs, errorHandler);
</script>

"folder-icon.gif" と "file-icon.gif" をこのページと同じフォルダーに格納して下さい。
ul id="filelist" に検索した TEMPORARY エントリを表示します。
<ul id="filelist"></ul>
webkitRequestFileSystem は RequestFileSystem を参照して下さい。
onInitFs は RequestFileSystem が成功したときの関数です。
errorHandler は RequestFileSystem が失敗したときの関数です。
window.webkitRequestFileSystem(window.TEMPORARY, 1024, onInitFs, errorHandler);

onInitFs() で TEMPORARY を検索して entries[] の配列に格納します。
createReader(); でリーダーを取得します。
dirReader.readEntries() でエントリーを検索します。
見つかったときは entries.concat(toArray(results)); で配列に追加します。
見つからなかった(全ての検索が終えた)ときは listResults() を呼び出します。

function onInitFs(fs)
{ var dirReader = fs.root.createReader();
  var entries = [];
  // Call the reader.readEntries() until no more results are returned.
  var readEntries =
    function()
    { dirReader.readEntries (
        function(results)
        { if (!results.length)
          { listResults(entries.sort());
          }
          else
          { entries = entries.concat(toArray(results));
            readEntries();
          }
        }, errorHandler);
    };
  readEntries(); // Start reading dirs.
}

全ての検索が終えたときに呼び出される listResults() 関数です。
フォルダーのときは "folder-icon.gif" を、ファイルのときは "file-icon.gif" を設定して <li> タグを作成します。
<li> タグを <ul id="filelist"></ul> に追加します。

function listResults(entries)
{ // Document fragments can improve performance since they're only appended
  // to the DOM once. Only one browser reflow occurs.
  var fragment = document.createDocumentFragment();
  entries.forEach(
    function(entry, i)
    { var img = entry.isDirectory ? '<img src="folder-icon.gif">' :
                                    '<img src="file-icon.gif">';
      var li = document.createElement('li');
      li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
      fragment.appendChild(li);
    });
  document.querySelector('#filelist').appendChild(fragment);
}

見つかった項目を配列に追加する関数です。

function toArray(list)
{ return Array.prototype.slice.call(list || [], 0);
}

function errorHandler(e) はエラーが発生したときの Handler です。
エラーが発生した状況を多少なりとも解析して表示しています。
TEMPORARY File を削除するときは TEMPORARY Delete を参照して下さい。
このプログラムはサブフォルダーには対応していません。
Directory(フォルダー)構造を使っているときは、Directory が見つかると再起コールします。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)