JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<input type="file" id="files" multiple>
<output id="output"></output>

JavaScript

// ファイル選択時に呼ばれる
function handleFileSelect(e) { 
  var files = e.target.files;

  console.log(files);
  var output = [];

  //ファイルの属性情報を取得
  for (var i = 0, len = files.length; i < len; i++) {
    var f = files[i];
    output.push("<li><strong>", escape(f.name), "</strong> ファイルサイズ：", escape(f.size), "</li>");  
  }

  document.getElementById("output").innerHTML = "<ul>" + output.join("") + "</ul>";
}

document.getElementById("files").addEventListener("change", handleFileSelect);