2017/02/06更新

[Javascript] input要素(file)で、ディレクトリを丸ごと選択する

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日はinputのfileタグで、ディレクトリを選択したり、その情報をJSで読み取ったりする方法をブログに書きたいと思います。
画像

目次




inputのfileタグでディレクトリを指定可能にする

2017年2月現在ChromeとFirefox(バージョン50以上)で、<input type="file"/>でディレクトリ選択をすることができます。具体的には以下のようにwebkitdirectory属性を追加します。
<input id="file" type="file" name="upfile[]" webkitdirectory>
これだけでディレクトリ選択ができるようになります、すごいですね。



Javascriptで内容を読み取る

ディレクトリでファイル選択されたものは、以下のようにJSから読み取ることができます。
document.getElementById('file').addEventListener('change', ev => {

    for (let i = 0; i < ev.target.files.length; i++) {

        let file = ev.target.files[i];

        // ディレクトリの相対パス
        let relativePath = file.webkitRelativePath;

        // ここではテキストファイルとして読み出してみる.
        let fileReader = new FileReader();
        fileReader.onload = event => {
            
            // 内容を取得する.
            let text = event.target.result;

            // 表示してみる.
            console.log(relativePath, text);
        }
        fileReader.readAsText(file);
    }
});
と、こんな感じで、ディレクトリ内の相対パスの取得や、ファイルの中身を見ることができます。なお、ファイル内容がバイナリーの場合には、例えば以下のようにして読みだすことができます。
// バイナリーデータをDataURL形式で読み込む.
let fileReader = new FileReader();
fileReader.onload = event => {
    let data = event.target.result;
}
fileReader.readAsDataURL(file);
例えば、以下のようなディレクトリ構造のものをアップロードすると、
  • data/
    • a.txt(中身は「aaa」)
    • b.txt(中身は「ccc」)
    • sub/
      • c.txt(中身は「ccc」)
以下のような出力となります。
data/a.txt aaa
data/b.txt bbb
data/sub/c.txt ccc
サンプルは以下におきましたので、もし良ければお試しください。
https://github.com/yoheiMune/frontend-playground/blob/master/017-directory-upload/index.html



サーバーで受け取る

サーバーで受け取るところは、以下のQiitaがわかりやすかったので、そちらをご参照ください。ディレクトリ構造(ファイルの相対パス)は渡せないみたいなので、その辺はうまくやる必要があるみたいですね。
http://qiita.com/akase244/items/f5f7287cfe28bebe00fc



最後に

ディレクトリをそのままアップできるのは嬉しいですね。その辺もFlashなしで動かせるようになると素敵です。

最後になりますが本ブログでは、Linux・フロントエンド・インフラ・Go言語・Node.js・Python・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。