JSFiddle - React, Tailwind, and code Playground

by kazu69

HTML

<div class="space">
スペース<br>
スペース<br>
スペース<br>
スペース<br>
スペース<br>
スペース<br>
スペース<br>
スペース<br>
スペース<br>
スペース<br>
</div>
<div class="input-content">
<input type="file">
<img src="" width="40" height="30" alt="Image preview...">
<br>
<input type="text" placeholder="入力項目"  />
</div>

CSS

html, body {
  height: 99%;
  margin: 0;
}

.space {
  background-color: #ddf;
}

.input-content {
  margin: 20px 0;
}

JavaScript

document.querySelector('input[type=file]').addEventListener('change', previewFile, false)

document.querySelector('img').addEventListener('click', removeFile, false)

function removeFile() {;
var preview = document.querySelector('img');
if (preview.src != '') {
 preview.src = "";
}
}

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}