Upload Image and Covert To The Base64 String by Using Javascript

In this post, Upload Image and Covert To The Base64 String by Using Javascript , you will learn how to convert uploaded image into Base64 string. Base64 encoded Format : data:image/png;base64,8UIOINSHVBORw0KG467JYSGHSKGSFAAAANSUhEUgAHJSKJSKUGBHSH Base64 is a binary-to-text encoding techniques that encode binary data into 24-bit sequences that can be represented by four 6-bit Base64 digits.

<!DOCTYPE html>
<html lang="en">
<input type="file" id="upload_file" name="upload_file"><br>

<p id="base64"></p><br>
<img id="uploaded_image"><br>

<script>
function uploadFile() {
  console.log('here');
  if (!this.files || !this.files[0]) return;
    
  const fileReader = new FileReader();
    
  fileReader.addEventListener("load", function(evt) {
    document.querySelector("#uploaded_image").src = evt.target.result;
    document.querySelector("#base64").textContent = evt.target.result;
  }); 
    
  fileReader.readAsDataURL(this.files[0]);
}
document.querySelector("#upload_file").addEventListener("change", uploadFile);
</script>
</html>

Output:

I hope this post helped you to learn about Upload Image and Covert To The Javaby Using Javascript in a very detailed way.