Convert Image to Base64 String using jQuery

Published on November 17, 2020 48 sec read

In this article, I’m going to convert an image to base64 string using jQuery. Let’s have a look:

Convert & Display Image

This code will convert an image to base64 and display in the webpage:

<html>
<head>
  <title>Convert Image to Base64 String using jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
<form>
  <input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">
  <button type="submit">Submit</button>
  <br><br>
  <textarea id="base64Code" rows="15" cols="68"></textarea>
  <br><br>
  <img src="" id="base64Img" width="500">
</form>
</body>
<script type="text/javascript">
   function encodeImgtoBase64(element) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onloadend = function() {
      $("#base64Code").val(reader.result);
      $("#convertImg").text(reader.result);
      $("#base64Img").attr("src", reader.result);
    }
    reader.readAsDataURL(file);
  }
</script>
</html>

Output

Have a look at the output:

Image to Base64 String
That’s it. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow