How to convert image into base64 string jQuery?

Sometime, We may need to convert image object into base64 string using javascript. base64 is easy to store directly to database and simply use it. So in this example i will let you know how to convert your selected image or file into base64 string.

Here, bellow see full example of convert selected image into base64 string. So let's see bellow example.

Example:


<!DOCTYPE html>
<html>
<head>
	<title>How to convert image into base64 string jQuery?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form>
	<input type="file" name="image" onchange="encodeImagetoBase64(this)">
	<button type="submit">Submit</button>
	<a class="link" href=""></a>
</form>
</body>
<script type="text/javascript">
   function encodeImagetoBase64(element) {
	  var file = element.files[0];
	  var reader = new FileReader();
	  reader.onloadend = function() {
	    $(".link").attr("href",reader.result);
	    $(".link").text(reader.result);
	  }
	  reader.readAsDataURL(file);
	}
</script>
</html>

How to convert image into base64 string jQuery?

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles