jQuery converts the image into a base64 string. In this tutorial, we will learn how to convert images into base64 strings before uploading and displaying previews on web pages.
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>how to 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
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- jQuery Get Multiple Checkbox value to Comma (,) String
