How to convert image into base64 string jQuery?

June 28, 2017 | Category : JQuery

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...