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>
I hope you enjoy code...
Do you like below Tutorials ?
- How to Open URL in New Tab using Jquery?
- Laravel 7.x and 6.x Routing Tutorial
- Ng Bootstrap Modal in Angular 8 Example
- Bootstrap 4 Datepicker in Angular 9/8 Example
- Disable Registration Route in Laravel
- Bootstrap Timepicker in Angular Example
- Count Number of Pages in PDF - PHP Script
- Digital Signature PHP Script Example