選択した1つの画像を表示する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p><input type="file" name="input" id="input" accept="image/*"></p>
  <div id="box">
    <img id="preview" src="">
  </div>
</body>
</html>

script.js

window.onload = function() {
  let input = document.getElementById('input');
  input.addEventListener('change', function (e) {
    // 1枚だけ表示する
    var file = e.target.files[0];

    // ファイルのブラウザ上でのURLを取得する
    var blobUrl = window.URL.createObjectURL(file);

    // img要素に表示
    var img = document.getElementById('preview');
    img.setAttribute("width", "200");
    img.setAttribute("height", "200");

    img.src = blobUrl;
  });
}

選択した複数の画像を表示する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p><input type="file" id="input" accept="image/*" multiple></p>
  <div id="img_box"></div>
</body>
</html>

script.js - CASE 1

window.onload = function() {
  let input = document.getElementById('input');
  input.addEventListener('change', function(e){
    document.getElementById('img_box').innerHTML = "";
    var imgs = e.target.files;

    for (i = 0; i < imgs.length; i++) {
      console.log(imgs[i]["name"])
      var fileReader = new FileReader();
      fileReader.onload = (function (e) {
        document.getElementById('img_box').innerHTML += '<img height="200" width="200",  src="' + e.target.result + '">';
      });
      fileReader.readAsDataURL(imgs[i]);
    }
  });
}

script.js - CASE 2

window.onload = function() {
  let input = document.getElementById('input');
  input.addEventListener('change', function (e) {
    const imgs = e.target.files;

    for (var i = 0; i < imgs.length; i++) {
      var fileReader = new FileReader();
      
      const name = imgs[i]["name"];
      fileReader.addEventListener('load', function(){
        let img_box = document.getElementById("img_box");
        let item = document.createElement('div');
        let header = document.createElement('h1');
        let img = document.createElement('img');
        let txt = document.createTextNode(name);

        header.appendChild(txt);
        img.setAttribute("width", "200");
        img.setAttribute("height", "200");
        img.setAttribute("src", this.result);

        item.appendChild(header);
        item.appendChild(img);
        img_box.appendChild(item);
      })
      fileReader.readAsDataURL(imgs[i]);
    }
  });
}

選択した複数の画像を表示する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p><input type="file" id="get_file" multiple></p>
  <div id="img_box"></div>
</body>
</html>

script.js

window.onload = function(){
  let get_file = document.getElementById("get_file");
  get_file.addEventListener("change", function (e) {
    for (let file of e.target.files) {
      // img_box の子要素をすべて削除
      let imgBox = document.getElementById("img_box");
      while(imgBox.lastChild){
        imgBox.removeChild(imgBox.lastChild);
      }

      let image = new Image();
      let url = URL.createObjectURL(file);
      image.src = url;
      
      image.addEventListener('load', function () {
        URL.revokeObjectURL(url);

        let box = document.getElementById("img_box");
        let ptag = document.createElement("p");
        ptag.className = "img_item";
        
        ptag.append(image);
        box.append(ptag);
      });
    }
  }, false);
}