HTML5 FileAPI フォルダ内ファイルのファイル名取得
HTML5ではFileAPIが実装されたということで、
指定フォルダ内にあるファイルのファイル名を取得したいと思い、
いろいろ検索してサンプルを探しましたが、
どうやら フォルダ情報を取得する機能はまだ実装されていないようです。
ただ、Chromeでは試験的に？フォルダ情報を扱うことができるようですね。
（AndroidのChromeは試してみましたがダメでした）
（参考サイト） directory：フォルダ指定によるローカルファイル群の属性取得
で。ちょっと、この参考サイトのサンプルソースをコピペしただけで動くように補って 勝手に貼らせていただきます。Chromeプラウザでしか動きませんので、ご注意ください。
ちなみにー。
ＨＤＤにあるファイルやフォルダ情報をすべて抽出してくれるフリーのツールを利用しています。
でも、抽出対象にＨＤＤ丸ごと全部を指定すると とんでもなく時間がかかることがあります。
僕が欲しい情報以外のファイル情報を取得したり、メモリ操作が最適化されてないかったりして遅いんじゃないかな？
と思い、ＤＯＭをメモリ代わりに使ったりして、ちょー高速にディレクトリ構造を抽出するツールを作りたくなったんですね。
んー、も少し待ちますか。HTML5のFileAPI仕様の充実を。
（追記） Ruby版をつくってみました。 → サンプルはこちら
指定フォルダ内にあるファイルのファイル名を取得したいと思い、
いろいろ検索してサンプルを探しましたが、
どうやら フォルダ情報を取得する機能はまだ実装されていないようです。
ただ、Chromeでは試験的に？フォルダ情報を扱うことができるようですね。
（AndroidのChromeは試してみましたがダメでした）
（参考サイト） directory：フォルダ指定によるローカルファイル群の属性取得
で。ちょっと、この参考サイトのサンプルソースをコピペしただけで動くように補って 勝手に貼らせていただきます。Chromeプラウザでしか動きませんので、ご注意ください。
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
</head>
<body>
<script>
function fileListDirectory(files) {
var ファイル数 = files.length;
var ファイル名 = new Array();
var パス = new Array();
for (i=0; i<ファイル数; i++) {
ファイル名[i] = files[i].name;
パス[i] = files[i].webkitRelativePath; // 行Ａ
}
var 表示内容 = "";
for (i=0; i<ファイル数; i++) {
if (ファイル名[i] == ".") { // 行Ｂ
表示内容 += "フォルダ：";
}
else {
表示内容 += "ファイル：";
}
表示内容 += パス[i] + "<br>";
}
document.getElementById('表示場所').innerHTML = 表示内容;
}
</script>
<p><input type="file"
webkitdirectory directory
onChange="fileListDirectory(this.files)"></p>
<div id="表示場所" class="red">結果がここに表示されます。</div>
</body>
</html>
<html>
<head>
<title>テスト</title>
</head>
<body>
<script>
function fileListDirectory(files) {
var ファイル数 = files.length;
var ファイル名 = new Array();
var パス = new Array();
for (i=0; i<ファイル数; i++) {
ファイル名[i] = files[i].name;
パス[i] = files[i].webkitRelativePath; // 行Ａ
}
var 表示内容 = "";
for (i=0; i<ファイル数; i++) {
if (ファイル名[i] == ".") { // 行Ｂ
表示内容 += "フォルダ：";
}
else {
表示内容 += "ファイル：";
}
表示内容 += パス[i] + "<br>";
}
document.getElementById('表示場所').innerHTML = 表示内容;
}
</script>
<p><input type="file"
webkitdirectory directory
onChange="fileListDirectory(this.files)"></p>
<div id="表示場所" class="red">結果がここに表示されます。</div>
</body>
</html>
ちなみにー。
ＨＤＤにあるファイルやフォルダ情報をすべて抽出してくれるフリーのツールを利用しています。
でも、抽出対象にＨＤＤ丸ごと全部を指定すると とんでもなく時間がかかることがあります。
僕が欲しい情報以外のファイル情報を取得したり、メモリ操作が最適化されてないかったりして遅いんじゃないかな？
と思い、ＤＯＭをメモリ代わりに使ったりして、ちょー高速にディレクトリ構造を抽出するツールを作りたくなったんですね。
んー、も少し待ちますか。HTML5のFileAPI仕様の充実を。
（追記） Ruby版をつくってみました。 → サンプルはこちら