Convert Image To Base64 String Using JQuery

In this tutorial we will see how to Convert Image To Base64 String Using JQuery. The JQuery Code and HTML Code is given below.

Table of Contents

HTML Code

HTML Code is given below.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">    
<title>Convert Image To The Base64 String Using Jquery</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
#output
{
word-wrap: break-word;
width: 500px;   
}
</style>
</head>
<body>
<form>
<input type="file" onchange="ImageToBase64(this)">
<p id="output"></p>
<img src="" id="output-image" width="500">
</form>
</body>
</html>

JQuery Code

JQuery Code is given below. The output Base64 String of image is displayed inside paragraph element while image is displayed using Base64 String.

<script>
function ImageToBase64(image) {
var img = image.files[0];
var reader = new FileReader();
reader.onloadend = function()
{
$("#output").text(reader.result);
$("#output-image").attr("src", reader.result);
}
reader.readAsDataURL(img);
}
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Convert Image To Base64 String Using JQuery.