<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Preview an image using jQuery</title>
</head>
<body>
<span class="heading">Developer Corner Preview an image before uploading using jQuery</span>
<form>
<div class="holder">
<img id="imgPreview" src="#" alt="pic" />
</div>
<input type="file" name="photograph"
id="photo" required="true" />
</form>
<style>
.holder {
height: 300px;
width: 300px;
border: 2px solid black;
}
img {
max-width: 300px;
max-height: 300px;
min-width: 300px;
min-height: 300px;
}
input[type="file"] {
margin-top: 5px;
}
.heading {
font-family: Montserrat;
font-size: 45px;
color: green;
}
</style>
<script>
$(document).ready(() => {
$("#photo").change(function () {
const file = this.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function (event) {
$("#imgPreview")
.attr("src", event.target.result);
};
reader.readAsDataURL(file);
}
});
});
</script>
</body>
</html>