【html】ファイルダイアログから複数ファイルをアップロードする

<input type="file" multiple>

HTMLでは<input type="file">タグを用いることでファイルダイアログを開く機能をページに埋め込むことができますが、デフォルトではファイルを一つしかアップロードできません（ファイルダイアログで一つしかファイルを選択できない）。

HTML

<input id="input_file" type="file" />

JS

function onChange(event) {
  // 取得できるファイルは一つのみ
  let file = event.target.files[0];
}
document.getElementById("input_file").addEventListener('change', onChange, false);

ファイルを複数選択するためには、inputタグに属性multipleを付加します。この属性を有効にした状態で、ファイルダイアログ上でShilf``Command(Ctrl)を押しながらファイルアイコンをクリックすると、ファイルの複数選択が可能になります。

HTML

<input id="input_file" type="file" multiple/>

JS

function onChange(event) {
  // 複数選択したファイルをFileList型オブジェクトとして取得
  let files = event.target.files;
  for (let file of files) {
    console.log(file); // [object file]...
  }
}
document.getElementById("input_file").addEventListener('change', onChange, false);

ちなみに、<input type="file">にイベントリスナchangeを設定したときに取得できるファイルオブジェクトのリスト$event.target.filesはFileList型のオブジェクトであり、Array型のようにイテレート可能ですがArrayが持つプロパティの殆どを持っていません（要素を取得するitem()、リスト長を取得するlengthのみ持つ）。