Works by

Works by

プログラミング等IT技術関連でメモする

【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)を押しながらファイルアイコンをクリックすると、ファイルの複数選択が可能になります。

f:id:rennnosukesann:20180502002915p:plain

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.filesFileList型のオブジェクトであり、Array型のようにイテレート可能ですがArrayが持つプロパティの殆どを持っていません(要素を取得するitem()、リスト長を取得するlengthのみ持つ)。