How to Preview Image Before Upload Using jQuery

10 Apr 2023 | jQuery

In this tutorial, you will learn how to preview image before upload using jQuery with example. Image uploading is a common feature in many web applications. In many cases, it is useful to allow users to preview the images they are about to upload before actually uploading them. This can help users ensure that they are uploading the correct image and that the image is of the desired quality.

In this blog post, we will explore how to preview images before upload using jQuery.

Step 1: Create the HTML Form

The first step is to create an HTML form that allows users to select an image file to upload. Here is an example of such a form:

<form>
   <div class="form-group">
      <img src="" class="w-50" id="imgPreview">
   </div>
   <div class="form-group">
      <label><b>Select Image:</b></label>
      <input type="file" class="form-control" id="imgInput" accept="image/*">
   </div>
</form>

In this form, we have created an input element of type "file" and assigned it an ID of "fileInput". We have also included an image element with an ID of " imgInput " that will be used to display the preview of the selected image. The "accept" attribute limits the file selection to only images.

Step 2: Write jQuery Code

Now that we have our HTML form so, we can write the code to preview the image. Here's an example of how you can do this:

$("#imgInput").change(function() {
    if (this.files && this.files[0]) {

        var reader = new FileReader();

        reader.onload = function(e) {
            $('#imgPreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(this.files[0]);
    }
});

In this code, we have used jQuery to select the file input element with the ID "imgInput" and attached a "change" event handler to it. When the user selects an image file, function uses the FileReader object to read the contents of the selected file and convert it to a data URL. The data URL is then set as the "src" attribute of the preview image element, and the element is displayed.

Complete Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<title>How to Preview Image Before Upload using jQuery - buildwithphp.com</title>
</head>
<body>
	<div class="container mt-5">
		<div class="row">


			<div class="col-lg-2 mx-auto p-1" style="background-color: #1f386a;">
				<a href="https://www.buildwithphp.com/">
					<img src="https://www.buildwithphp.com/front/images/logo.webp" class="img-fluid">
				</a>
			</div>
			
			<div class="col-md-12 mt-4 text-center">
				<h5>How to Preview Image Before Upload using jQuery</h5>
				<hr>
			</div>

			<div class="col-md-4 mx-auto">
				<form>
					<div class="form-group">
						<img src="" class="w-50" id="imgPreview">
					</div>
					<div class="form-group">
						<label><b>Select Image:</b></label>
						<input type="file" class="form-control" id="imgInput" accept="image/*">
					</div>
				</form>
			</div>



		</div>
	</div>


	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


	<script>
		$("#imgInput").change(function(){
			if (this.files && this.files[0]) {

				var reader = new FileReader();

				reader.onload = function (e) {
					$('#imgPreview').attr('src', e.target.result);
				}

				reader.readAsDataURL(this.files[0]);
			}
		});
	</script>



</body>
</html>

Congratulations, Now the above code is ready to run.

In this blog post, we have explored how to preview images before upload using jQuery. This can be a useful feature in many web applications that allow users to upload images. By following the steps outlined above, you can easily implement this feature in your own web application.

Buddy! I hope you relished the tutorial, and it was good to see you again. Keep learning. Keep visiting.

We are here to solve your problems.

how to preview image before upload using jquery