Preview an image before uploading using jQuery

14-Sep-2024

S.no	Contents-topics
1	Introduction
2	HTML code

1:Introduction

Preview an image before uploading using jQuery we are going to use the JavaScript constructor FileReader() to read the image provided and then we shall display it. We have used img tag to display the image we get from the file we upload. Then we used FileReader() to get the file and then we used reader.readAsDataURL(file) to read the file as it is a image file or not.

2:HTML code

Also read:DOM ELEMENTS IN JQUERY

HTML code Copy

<!DOCTYPE html>

<head>

<title>Preview an image using jQuery</title>

</head>

<body>

<span class="heading">Developer Corner Preview an image before uploading using jQuery</span>

<form>

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

$(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>

Also read:ENABLE/LOAD AND DISABLE CSS USING JQUERY

Output of Preview an image before uploading:

Tags: preview of an image before uploading using jQuery , preview of an image using jquery , how to show image using jquery,jquery , advance jquery , jquery advance code,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.