Convert Image to Base64 String using jQuery
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:
That’s it. Thanks for reading.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.