Convert Image to base64 String jQuery
jQuery convert image into base64 string. In this tutorial, we will learn how to convert image into base64 string before upload 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>
