APIfileList:ローカルファイルの属性を得るファイルの内容ではなく、ファイル名やタイプなどの属性を得るだけの機能です。その手段には、ダイアログボックス(フォルダ内ファイル群の表示機能)から選択するドラッグ&ドロップで選択するの2つがあります。例1(fileList):ローカルファイルの属性を得る(ダイアログボックス、基本的)下の[参照]あるいは[ファイル選択]ボタン(ブラウザにより異なります)をクリックすると、ディレクトリ画面が表示されます。適当に操作して、ファイル(複数でもよい)を選択してください。適当に選択するとします。class="red">結果がここに表示されます。</div>結果がここに表示されます。特別な記述になる通常のinputならばボタンの表示をvalue="xxx"で与えますが、ここではそれがありません。「参照」などのボタン設定をブラウザが自動的に行っているのです。そのため、ブラウザにより表示が異なります。逆に、入力した場所を特定するため(行Bで入力データを受け取るため)にid="xxx"が必要です。type="file"は、ファイルを選択させ、ファイル名を取得するための入力欄です。これだけで、ダイアログボックス画面を表示してファイルを選択指定させます。multipleは複数ファイル選択が可能なときに指定します。実行はonClickではなくonChangeです。「このフィールドが変化したとき」のイベントで、ファイルが選択されたときに起動されます。場合は、それを行Bで受け取り「指定ファイル群」オブジェクトと定義しています。そのため、引数は不要になります。その配列のサイズ、すなわちファイル数です(行C)。(i=0~ファイル数-1)に入っています。フォルダを入力しても無視されます。行Dのように、指定ファイル群.fileは次の属性をもちます。なり実用的には意味がありません。size:ファイルのバイト数lastModifiedDate:最終更新日type:ファイルがテキストなのか画像なのかのタイプtypeについてtypeは「xxx/yyy」の形式になっています。xxxはグループ、yyyは識別子だといえます「text/plain」はtxtファイル、「text/html」はhtmlファイル「image/jpeg」はjpegファイル、「image/gif」はgifファイルのような簡潔になっています。ように、そのファイルを取り扱うアプリケーションを表示します。OSが知らない識別子のときは、表示されません。...}のようにして、文書ファイルあるいは画像ファイルだけを取り出すことができます。(日本標準時)のように、煩雑な表示になってしまいます。最終更新日=1497770106721となってしまいます。日付や時刻の表示に関しては、有名なCDNライブラリ「date-fns」があります。src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>と設定することにより、多様な表示に変換できます。(2017年06月18日と表示)などもできます。指定ファイル群を引数(this.files)として受け渡すことにより、Script部が簡素になります。class="red">結果がここに表示されます。</div>結果がここに表示されます。キーワードthisキーワードは、実行中の処理において「"ここでの"を表すオブジェクト」にアクセスするためのキーワードです。いう名前とするという意味です。いう仮引数で受け取っているのです。それで、例2では行Bに相当する処理は不要になり、行Cは行Gに、行Dは行Hのように簡潔になるのです。仮引数の名称なdので勝手な名称でよいということです。画像[i].name;とできます。処理は例1・例2と同じですが、あらかじめHTMLで長方形の枠(下の灰色の部分)に対象となるファイル群ををドラッグ&ドロップにより選択する入力方法です。対象ファイルをディレクトリ画面から取り出してもよいし、デスクトップのアイコンから取り出すこともできます。冗長になるので、ここではファイル名(.name)だけを表示することにしました。}</script><p>灰色の部分にファイルをドラッグ&ドロップしてください。class="red">結果がここに表示されます。</div>灰色の部分にファイルをドラッグ&ドロップしてください。結果がここに表示されます。この処理では、ドラッグしたときと、ドロップしたときの2つの処理に分かれます。行Pで灰色の長方形を作成しています。():何もしない)に変更する処理です。ドロップしたときのブラウザの標準処理を止めています。行N・行Oのevent.dataTransferは「発生したイベント(event)でTransferしたdata」というJavascriptがもっているオブジェクトで、ここでは、ドロップされたファイル群ですから、例1での「指定ファイル群」に相当します。