スタートページJavascriptFile API

fileList:ローカルファイルの属性を得る

 ファイルの内容ではなく、ファイル名やタイプなどの属性を得るだけの機能です。
 その手段には、
    ダイアログボックス(フォルダ内ファイル群の表示機能)から選択する
    ドラッグ&ドロップで選択する
の2つがあります。


例1(fileList):ローカルファイルの属性を得る(ダイアログボックス、基本的)

 下の[参照]あるいは[ファイル選択]ボタン(ブラウザにより異なります)をクリックすると、ディレクトリ画面が表示されます。適当に操作して、ファイル(複数でもよい)を選択してください。
 ここでは、下図のように、root-folder から適当に選択するとします。

<script>
    function fileListDialog() {                                  // 行A
        // 取得する情報
        var ファイル数;
        var ファイル名 = new Array();
        var URN     = new Array();
        var タイプ     = new Array();
        var サイズ     = new Array();
        var 最終更新日 = new Array();

        // 指定ファイル群の属性の取得
        var 指定ファイル群 = document.getElementById("選択指定1");   // 行B

        // 取得ファイル
        ファイル数 = 指定ファイル群.files.length;                     // 行C
        for (var i = 0; i < ファイル数; i++){
            ファイル名[i]  = 指定ファイル群.files[i].name;            // 行D
            URN[i]      = 指定ファイル群.files[i].urn;
            タイプ[i]      = 指定ファイル群.files[i].type;
            サイズ[i]      = 指定ファイル群.files[i].size;
        var 日付 = new Date(指定ファイル群.files[i].lastModified);    // 行E
        var 日付形式 = dateFns.format(日付, 'YYYY-MM-DD');            //
        最終更新日[i] = 日付形式;                                     //
        }
        // 属性の表示
        var 表示内容 = "<hr>ファイル数=" + ファイル数 + " files<br><hr>";
        for (i = 0; i < ファイル数; i++){
            表示内容 += "ファイル名=" + ファイル名[i] + "<br>"
                      + "URN=" + URN[i] + "<br>"
                      + "タイプ=" + タイプ[i] + "<br>"
                      + "サイズ=" + サイズ[i] + " bites<br>"
                      + "最終更新日=" + 最終更新日[i]  + "<br>
                      + "<hr>";
        }
        document.getElementById('表示場所1').innerHTML = 表示内容;
    }
</script>


<p><input id="選択指定1" type="file" multiple 
          onChange="fileListDialog()"></p>                 <!-- 行F -->
<div id="表示場所1" class="red">結果がここに表示されます。</div>

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

行F:file-API では input が特別な記述になる

行A~行D:スクリプト部

typeについて

typeは「xxx/yyy」の形式になっています。xxxはグループ、yyyは識別子だといえます
  「text/plain」はtxtファイル、「text/html」はhtmlファイル
  「image/jpeg」はjpegファイル、「image/gif」はgifファイル
のような簡潔になっています。
 Wordファイルなど、OSは知っているが、ブラウザの対象ではないものは、
  application/vnd.openxmlformats-officedocument.wordprocessingml.document のように、そのファイルを取り扱うアプリケーションを表示します。
 さらに、OSが知らない識別子のときは、表示されません。

xxx が text と image の場合、
    if (タイプ.match('text.*') ) {… …}
    if (タイプ.match('image.*') ) {… …}
のようにして、文書ファイルあるいは画像ファイルだけを取り出すことができます。

行E:年月日の表示について

単純に「最終更新日[i] = 指定ファイル群.files[i].lastModifiedDate;」とすると、
  最終更新日=Sun Jun 18 2017 16:15:06 GMT+0900 (日本標準時)
のように、煩雑な表示になってしまいます。

「最終更新日[i] = 指定ファイル群.files[i].lastModified;」という指定もできるのですが、どういう理由からか、
  最終更新日=1497770106721
となってしまいます。

日付や時刻の表示に関しては、有名なCDNライブラリ「date-fns」があります。
  <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>
と設定することにより、多様な表示に変換できます。
ここでは 'YYYY-MM-DD' としましたが、'YYMMDD' (170618と表示)や 'YYYY年MM月DD日' (2017年06月18日と表示)などもできます。

例2:ダイアログボックスでのthisによる簡素化

 機能は例1と全く同じですが、Body部の input で指定ファイル群を引数(this.files)として受け渡すことにより、Script部が簡素になります。

<script>
    function fileListDialogThis(files) {                 // 行F
        // 取得する情報
        var ファイル数;
        var ファイル名 = new Array();
        var URN     = new Array();
        var タイプ     = new Array();
        var サイズ     = new Array();
        var 最終更新日 = new Array();

        ファイル数 = files.length;                        // 行G
        for (var i = 0; i < ファイル数; i++){
            ファイル名[i]  = files[i].name;               // 行H
            URN[i]      = files[i].urn;
            タイプ[i]      = files[i].type;
            サイズ[i]      = files[i].size;
        var 日付 = new Date(files[i].lastModified);
        var 日付形式 = dateFns.format(日付, 'YYYY-MM-DD');
        最終更新日[i] = 日付形式;
        }

        // 属性の表示
        var 表示内容 = "<hr>ファイル数=" + ファイル数 + " files<br><hr>";
        for (i = 0; i < ファイル数; i++){
            表示内容 += "ファイル名=" + ファイル名[i] + "<br>"
                      + "URN=" + URN[i] + "<br>"
                      + "タイプ=" + タイプ[i] + "<br>"
                      + "サイズ=" + サイズ[i] + " bites<br>"
                      + "最終更新日=" + 最終更新日[i] + "<br>"
                      + "<hr>";
        }
        document.getElementById('表示場所2').innerHTML = 表示内容;
    }
</script>


<p><input type="file" multiple 
    onChange="fileListDialogThis(this.files)"></p> 
<div id="表示場所2" class="red">結果がここに表示されます。</div>


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

例1との違い

  例1 行E:<p><input id="選択指定1" type="file" multiple onChange="fileListDialog()"></p>
  例2 行I:<p><input type="file" multiple onChange="fileListDialogThis(this.files)"></p>

  例1 行A:function fileListDialog()
  例2 行F:function fileListDialogThis(files)

  例1 行B:var 指定ファイル群 = document.getElementById("選択指定1");
  例2 なし

  例1 行C:ファイル数 = 指定ファイル群.files.length;
  例2 行G:ファイル数 = files.length;

  例1 行D:ファイル名[i]  = 指定ファイル群.files[i].name;
  例2 行H:ファイル名[i]  = files[i].name;

this キーワード

 thisキーワードは、実行中の処理において「"ここでの"を表すオブジェクト」にアクセスするためのキーワードです。
 この例では、input を実行中に、そこで得られたオブジェクト(例1では行Eの「選択指定1」で得られ、行Bで「指定ファイル群」オブジェクトと定義されるオブジェクト)に files という名前とするという意味です。
 行Fでは、そのオブジェクトを files という仮引数で受け取っているのです。

 それで、例2では行Bに相当する処理は不要になり、行Cは行Gに、行Dは行Hのように簡潔になるのです。ここで注意したいのは、例1での files はJavascriptで決められた名称であるのに対して、例2での files は仮引数の名称なdので勝手な名称でよいということです。
  行F:function fileListDialogThis(画像)
とすれば、
  行H:ファイル名[i] = 画像[i].name;
とできます。

例3:ドラッグ&ドロップにより選択したファイル群の属性表示

 処理は例1・例2と同じですが、あらかじめHTMLで長方形の枠(下の灰色の部分)に対象となるファイル群ををドラッグ&ドロップにより選択する入力方法です。
 対象ファイルをディレクトリ画面から取り出してもよいし、デスクトップのアイコンから取り出すこともできます。

 冗長になるので、ここではファイル名(.name)だけを表示することにしました。

<script>
    function fileListDrag(event) {     // 行J:ドラッグ開始時の処理
        if (event.preventDefault) {    // 行K:ブラウザの既定の挙動を抑制
            event.preventDefault();
       }
    }

    function fileListDrop(event) {     // 行L:ドロップ時 
        if (event.preventDefault) {    // 行M:ブラウザの既定の挙動を抑制
            event.preventDefault();
        }

        // 取得する情報
        var ファイル数;
        var ファイル名 = new Array();

        // eventオブジェクトのdataTransfer属性のfiles属性を参照
        ファイル数 = event.dataTransfer.files.length;            // 行N
        for (var i = 0; i < ファイル数; i++){
            ファイル名[i]  = event.dataTransfer.files[i].name;   // 行O
        }

        // 属性の表示
        var 表示内容 = "<hr>ファイル数=" + ファイル数 + " files<br><hr>";
        for (i = 0; i < ファイル数; i++){
            表示内容 += "ファイル名=" + ファイル名[i] + "<br>";
        }
        表示内容 += "<hr>";
        document.getElementById('表示場所3').innerHTML = 表示内容;
    }
</script>

<p>灰色の部分にファイルをドラッグ&ドロップしてください。</p>
<div style="height:100px; width:300px; background-color:silver;"  <!-- 行P -->
    onDragover="fileListDrag(event)"                              <!-- 行Q -->
    onDrop="fileListDrop(event)"></div>                           <!-- 行R -->
<div id="表示場所3" class="red">結果がここに表示されます。</div>

灰色の部分にファイルをドラッグ&ドロップしてください。

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

この処理では、ドラッグしたときと、ドロップしたときの2つの処理に分かれます。