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 ?
- Laravel - chmod(storage/oauth-private.key): Operation failed: Operation not permitted
- Laravel 7.x and 6.x datatables example from scratch
- How to compress PNG image using pngquant in PHP?
- Laravel 7.x and 6.x Chart example using Charts Package
- Guzzle http client GET and POST request example in Laravel 5
- Laravel schema default current timestamp value example
- Laravel 7.x and 6.x Get Site URL Examples
- Convert object to array in laravel 7.x and 6.x example