how to preview images before upload using HTML CSS and jQuery

Hello Dev,

Previewing images before upload is a common feature in many websites. It provides the user with a visual representation of the image they are uploading and ensures that they are uploading the correct image. In this article, we will see how to implement image preview before upload using HTML, CSS, and jQuery.

Demo

HTML Code:

First, let's create the HTML structure for the file input and the preview container.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>To-Do List</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="preview-container">
                <img id="preview" src="#" alt="Click to Browse Image" />
                <div class="file-input-container">
                    <input type="file" id="file-input" accept="image/*" />
                </div>
            </div>
        </div>
    </body>
    <script src="jquery-3.6.3.slim.min.js"></script>
    <script src="script.js"></script>
</html>

Here, we have two divs, one for the preview container and another for the file input container. Inside the preview container, we have an "img" element with an "id" of "preview" which will display the preview of the selected image. The "src" attribute is initially set to "#" so that it doesn't display any image until the user selects one.

In the file input container, we have a file input element with an "id" of "file-input". The "accept" attribute is set to "image/* " so that the file input only accepts image files.

CSS Code:

Now, let's style the preview container and file input container.

.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  border: 5px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px auto;
position: relative;
}

#preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.file-input-container input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-input-container label {
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
}

In this code, we added position: relative; to the file input container and position: absolute; to the file input. We also set the top, left, width, and height properties to 0 and 100% respectively to cover the entire container.

By setting the opacity to 0, the file input will be hidden, and the user will only see the label. We also added a cursor: pointer to the file input to indicate that it is clickable.

Now, when the user clicks on the label, the file input will become active and the user can select an image from their computer.

jQuery Code:

Now, let's use jQuery to preview the selected image.

$(document).ready(function() {
  $("#file-input").change(function() {
    let input = this;
    if (input.files && input.files[0]) {
      let reader = new FileReader();
      reader.onload = function(e) {
        $("#preview").attr("src", e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
    }
  });
});

Here, we use the change event of the file input to trigger the preview. When the user selects a file, the change event is fired and we use the FileReader API to read the selected file. The FileReader API allows

#ChatGPT

how to preview images before upload using HTML CSS and jQuery

Post a Comment

Contact Form