Preview Selected Image Using JQuery

In this tutorial we will see how to Preview Selected Image Using JQuery. The JQuery Code and HTML Code is given below.

HTML Code

HTML Code is given below.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">    
<title>Preview Selected Image Using JQuery</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<form>
<input type="file" onchange="imagePreview(this)">
<br>
<img src="" id="output-image" width="500">
</form>
</body>
</html>

JQuery Code

JQuery Code is given below. The image is displayed using Base64 String of image.

<script>
function imagePreview(image) {
var img = image.files[0];
var reader = new FileReader();
reader.onloadend = function()
{
$("#output-image").attr("src", reader.result);
}
reader.readAsDataURL(img);
}
</script>

Video Tutorial

Watch video tutorial on how to Preview Selected Image Using JQuery.