directory：フォルダ選択によるローカルファイル群の属性取得

このページは、GoogleChrome, Firefox, MicrosoftEdgeブラウザで閲覧してください。

　通常の FileApi で選択できる対象はファイルに限定されていました。しかし、実務的には、フォルダ（ディレクトリ）を選択して、その下部のファイルを展開できる機能が望まれます。
　それに応じて、input での type="file" に、directry 指定ができる拡張機能があります。例えば下図では、フォルダroot-folderを選択して、それに階層的に含まれるファイル群を一括選択することができます。

　しかし、この実装は遅れており、対応ブラウザは限定され、しかも標準以前であるとして、「directory」ではなく、独自の「webkitdirectory」の名称で実装している段階です。

<script>
function fileListDilectory(files, 表示場所) {
    var 表示内容 = "";
    for (i=0; i<files.length; i++) {
        表示内容
            += "name[" + i + "]=" + files[i].name
            + " urn["  + i + "]=" + files[i].urn
            + " path[" + i + "]=" + files[i].webkitRelativePath
            + " type[" + i + "]=" + files[i].type
            + " size[" + i + "]=" + files[i].size
            + " lmd["  + i + "]=" + files[i].lastModifiedDate
            + "<br>";
    }
    document.getElementById(表示場所).innerHTML = 表示内容;
}

</script>

<p><input  type="file"
     webkitdirectory directory
     onChange="fileListDilectory(this.files, '表示場所')"></p>
<div id="表示場所" class="red"></div>

webkitdirectory directoryにより、フォルダが対象になります（ファイルは対象になりません）。
本来は directory だけでよいのですが、実装が遅れており標準ではないので独自の webkitdirectory の名称になっています。
ここでは、どちらかがサポートされていればよいとして二つを並べています。
（ここで指定できるのは一つのフォルダだけです。それで multiple は付けません。）
urnは現状ではundifinedになります。これをカバーするためにwebkitRelativePath （選択したフォルダからの相対パス）があります。

結果がここに表示されます。