In this article, we will learn how to show image previews using jQuery. Here 'image preview' means that when we select an image, the preview of that image is shown inside the image tag. We can use jQuery to show a preview of an image. There are four ways to do this.
First, we'll look at an HTML form that has an input field along with an image tag where we'll preview the selected image.
Image Preview Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : Image Preview</title>
<link rel="stylesheet" href="../style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-950 flex justify-center">
<section class="w-auto h-auto mt-3 bg-white">
<header class="bg-violet-600 p-5 pl-6 pr-6">
<h2 class="text-3xl text-white tracking-wider">RAYS CODING : Image Preview</h2>
</header>
<form action="#" method="post" class="p-6 max-w-lg mx-auto bg-white rounded-lg shadow-lg">
<label for="image" class="block text-xl font-semibold text-gray-700 mb-2 mt-2">Upload Image</label>
<div class="relative">
<input type="file" name="image" id="image" class="hidden" accept="image/*" />
<label for="image" class="flex items-center justify-center w-full px-4 py-2 bg-violet-600 text-white font-semibold cursor-pointer shadow-lg hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">
<span>Choose an Image</span>
</label>
</div>
<div id="image-preview" class="mt-5 hidden">
<p class="text-xl font-medium text-gray-700">Selected Image:</p>
<img id="imagedisplay" src="" alt="Image Preview" class="w-full mt-3 h-52 rounded-md shadow-md object-cover" />
<p id="file-name" class="mt-2 text-gray-500"></p>
</div>
<button type="submit" id="submit-button" class="mt-5 bg-violet-600 p-2 w-full text-white font-semibold shadow-lg hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Submit</button>
</form>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
The purpose of this code is to create a developer-friendly image upload form. First a form is created which includes a CaptureType="false" field which can have no image selection by default. This file is designed with a design button so that the machine can easily select the image. On clicking the button, the file enterprise opens and the builder can select his image.
When the traveler selects an image, a preview of the image appears in a separate section below the form. This section is hidden at first but the image itself appears. Here the preview of the image and the file name are also shown so that the engineer can confirm that it is the correct image.
A submit button is provided below the form, you can submit your building created image. The design of this button is stylish and it also has a hover effect. When the architecture form is submitted, the image data is sent to the backend. This form is simple and interactive, which makes the process of uploading images easy.
Method One For The Image Preview
<script>
$(document).ready(function () {
$('#image').on('change', function () {
let image = $(this).prop('files')[0];
if (image) {
$('#file-name').text(image.name);
$('#imagedisplay').attr('src', URL.createObjectURL(image));
$('#image-preview').removeClass('hidden');
}
});
});
</script>
This code is written for an HTML form in which the user can upload an image. When the user selects the file, the change event is triggered. Inside this event, the code performs some actions to show the name of the file and the image. First, the name of the image is shown in the #file-name element, then the URL of the image is set in the src attribute of the #image-display element to preview the image. Finally, hidden is removed from the #image-preview class so that the preview can be visible.
This is a simple jQuery code that shows the details of the file when it is selected and shows the preview of the image. It uses URL.createObjectURL(), which returns a local URL to the image, so that the image can be previewed locally without uploading it to the server.
Method Two For The Image Preview
<script>
$(document).ready(function () {
$('#image').on('change', function () {
let [image] = this.files;
if (image) {
$('#file-name').text(image.name);
imagedisplay.src = URL.createObjectURL(image);
$('#image-preview').removeClass('hidden');
}
});
});
</script>
The function of this code is that when a user uploads a file (image), its name and preview can be displayed on the screen. This is done using jQuery. The function of the code is activated when the page is fully loaded and the user selects an image.
First, when the user selects an image, the change event is activated. Inside this event, the code sets the name of the image in the #file-name id element and creates a preview of the image. For the preview, the image is converted to a temporary URL using the URL.createObjectURL() function and displayed in the imagedisplay name element. Next, the hidden class is removed from the #image-preview id element so that the preview of the image is displayed on the screen.
The advantage of using this code is that the user can immediately see which file he has selected without reloading the page. This is useful for an interactive and user-friendly experience.
Method Three For The Image Preview
<script>
$(document).ready(function () {
$('#image').on('change', function (e) {
const image = e.target.files[0];
if (image) {
$('#file-name').text(image.name);
$('#imagedisplay').attr('src', URL.createObjectURL(image));
$('#image-preview').removeClass('hidden');
}
});
});
</script>
This code implements a functionality that shows the name and preview of the image file as soon as it is uploaded. When the user selects an image, the code starts working. This is done using jQuery.
First, the change event is fired on the input field with the #image ID. When the user selects an image, that image file is fetched via e.target.files[0]. Next, the name of the image is displayed in the element with the #file-name ID and URL.createObjectURL() is used to create a preview of the image. This temporary URL is set in the src attribute of the #imagedisplay image tag. Finally, the hidden class is removed from the #image-preview div so that the preview is visible on the screen.
This code is user-friendly as the user can immediately see which image he has selected without reloading the page. This kind of functionality is very useful in modern websites and forms.
Method Four For The Image Preview
<script>
$(document).ready(function () {
$('#image').on('change', function (e) {
const image = e.target.files[0];
if (image) {
const image_reader = new FileReader();
image_reader.onload = function () {
$('#file-name').text(image.name);
let image_output = document.getElementById('imagedisplay');
image_output.src = image_reader.result;
}
image_reader.readAsDataURL(image);
$('#image-preview').removeClass('hidden');
}
});
});
</script>
This code is a JavaScript jQuery script that works as an image preview. When a user selects an image, this script shows the name and preview (display) of that image.
Work starts after selecting an image: When a user selects an image through a file input, this code runs with the change event of the #image element. First, the selected image is accessed (e.target.files[0]).
FileReader is used: If an image is selected, FileReader is used to prepare the image for preview in the browser. It displays the name of the image (image.name) and a preview of the image inside the imagedisplay element.
Showing the preview: When the image is successfully loaded, its hidden class is removed to make the #image-preview div visible. This way the user can immediately see the name and preview of the selected image.