console 命令行工具 X clear

console

    function createImg(src) {
      var img = document.createElement('img')
      Object.defineProperties(img.style, {
        width: {
          value: '200px'
        },
        height: {
          value: '200px'
        },
        margin: {
          value: '10px'
        },
        border: {
          value: '6px solid black'
        }
      });
      if ((src + '').indexOf('base64') !== -1) {
        img.src = src;
        document.body.appendChild(img);
      } else {
        var imgSrc = URL.createObjectURL(new Blob([src], {
          type: 'image/png'
        }))
        img.src = imgSrc;
        document.body.appendChild(img);
        // URL.revokeObjectURL(imgSrc)
        imgSrc = img = null;
      }
      return null;
    }

    function handleFiles(files) {
      // black
      var reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = e => {
        createImg(e.target.result);
      }
      createImg(files[0]);
      
      // pink
      var img = document.createElement("img");
      img.classList.add("obj");
      img.file = files[0];
      document.body.appendChild(img);
      
    var reader = new FileReader();
    reader.onload = (function(aImg) { 
      return function(e) { 
        aImg.src = e.target.result; 
      }; 
    })(img);
    reader.readAsDataURL(files[0]);
      
      // green
      var img2 = document.createElement("img");
      img2.classList.add("obj2");
      img2.src = window.URL.createObjectURL(files[0]);
       img2.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
       document.body.appendChild(img2);
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <input type="file" accept="image/jpg" id="upfile" onchange="handleFiles(this.files)">
</body>

</html>

.obj {
  width: 200px;
  height:200px;
  margin: 10px;
  border: 6px solid #f48;
}

.obj2 {
  width: 200px;
  height:200px;
  margin: 10px;
  border: 6px solid green;
}