ReadImageFiles

Read Image files without backend

by JoeTS

HTML

<input type="file" id="fs"> <br>
<img id="target_img" width="800"/>
<small id="target"></small>

JavaScript

const reader = new FileReader();
const target_img = document.getElementById('target_img');
reader.addEventListener('load', (event) => {
  target_img.src = event.target.result;
  document.getElementById("target").innerHTML = "Load Image Successfully!";
});

// Event Listener for file input
const fileSelect = document.getElementById('fs');
fileSelect.addEventListener('change', (event) => {
  const file = event.target.files[0];
  reader.readAsDataURL(file);
})