Convert Image to Base64 String using jQuery

Published on November 17, 2020 48 sec read

We're available to do freelance project. Take a look at our services!

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:

  <title>Convert Image to Base64 String using jQuery</title>
  <script src=""></script>  
  <input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">
  <button type="submit">Submit</button>
  <textarea id="base64Code" rows="15" cols="68"></textarea>
  <img src="" id="base64Img" width="500">
<script type="text/javascript">
   function encodeImgtoBase64(element) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onloadend = function() {
      $("#base64Img").attr("src", reader.result);


Have a look at the output:

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


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


Leave a Reply

Your email address will not be published. Required fields are marked *