Convert Image to base64 String jQuery

Convert Image to base64 String jQuery

Convert image into base64 string using jQuery. When we work with jquery and upload the base64 string image to the webserver.

This tutorial helps you how to convert images into base 64 string using jQuery or javascript.

1. Convert image to base64 string jQuery

You can see that the full source code of convert image to base64 string in jQuery/javascript.

<!DOCTYPE html>
<html>
<head>
	<title>Convert image into base64 string using jQuery</title>
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>  
</head>
<body>
<form>

	<input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">

	<button type="submit">Submit</button>

	<a id="convertImg" href=""></a>

</form>
</body>
<script type="text/javascript">

   function encodeImgtoBase64(element) {

	  var file = element.files[0];

	  var reader = new FileReader();

	  reader.onloadend = function() {

	    $("#convertImg").attr("href",reader.result);

	    $("#convertImg").text(reader.result);

	  }

	  reader.readAsDataURL(file);

	}

</script>
</html>

Note: don’t forget to include the jQuery library on your web page.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

The above code will convert your image to base64 string using the jQuery or javascript on the client-side.

2. Convert Image base64 string & display image on the webpage jQuery

In the below example, we will convert image to base64 string and display image on the webpage.

<!DOCTYPE html>
<html>
<head>
	<title>Convert image into base64 string using jQuery</title>
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>  
</head>
<body>
<form>

	<input type="file" name="file" id="file" onchange="encodeImgtoBase64(this)">

	<button type="submit">Submit</button>

	<a id="convertImg" href=""></a>

    <br>

	<img src="" alt="" 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() {

	    $("#convertImg").attr("href",reader.result);

	    $("#convertImg").text(reader.result);

	    $("#base64Img").attr("src", reader.result);

	  }

	  reader.readAsDataURL(file);

	}

</script>
</html>

Recommended jQuery Tutorial

  1. How to Get the Current Page URL in jQuery
  2. jQuery Ajax Get() Method Example
  3. get radio button checked value jquery by id, name, class
  4. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  5. jQuery Get Data Text, Id, Attribute Value By Example
  6. Set data attribute value jquery
  7. select multiple class in jquery
  8. How to Remove Attribute Of Html Elements In jQuery
  9. How to Checked Unchecked Checkbox Using jQuery
  10. jQuery removeClass & addClass On Button Click By E.g.
  11. jQuery Get Multiple Checkbox value to Comma (,) String

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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