2014年05月06日

HTML5 FileAPI フォルダ内ファイルのファイル名取得

テーマ:javascript
HTML5ではFileAPIが実装されたということで、
指定フォルダ内にあるファイルのファイル名を取得したいと思い、
いろいろ検索してサンプルを探しましたが、
どうやら フォルダ情報を取得する機能はまだ実装されていないようです。

ただ、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;    // 行A
        }
        var 表示内容 = "";
            for (i=0; i<ファイル数; i++) {
            if (ファイル名[i] == ".") {                     // 行B
                表示内容 += "フォルダ:";
            }
            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>


ちなみにー。
HDDにあるファイルやフォルダ情報をすべて抽出してくれるフリーのツールを利用しています。
でも、抽出対象にHDD丸ごと全部を指定すると とんでもなく時間がかかることがあります。
僕が欲しい情報以外のファイル情報を取得したり、メモリ操作が最適化されてないかったりして遅いんじゃないかな?
と思い、DOMをメモリ代わりに使ったりして、ちょー高速にディレクトリ構造を抽出するツールを作りたくなったんですね。

んー、も少し待ちますか。HTML5のFileAPI仕様の充実を。


(追記) Ruby版をつくってみました。 → サンプルはこちら
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

えいめさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事
 もっと見る >>

コメント

[コメントをする]

コメント投稿

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。