ArticleZip > Onchange File Input Change Img Src And Change Image Color

Onchange File Input Change Img Src And Change Image Color

Have you ever had to deal with changing an image source dynamically based on a file input selection? Well, fret not! In this article, we'll walk you through how to achieve this neat trick with some straightforward HTML and JavaScript.

So, let's dive right in! When a user selects an image using a file input field on a webpage, we want to display that image on the page in real-time and maybe even give it a new hue just for fun.

The first step is to set up the HTML structure. You'll need an input element of type 'file' for uploading the image and an image element to display the selected image. Here's a simple example:

Html

<img id="image-preview" src="" alt="Preview">

Make sure to add an id attribute to both elements for easy access through JavaScript. The file input will be used to trigger the image change, and the image tag will display the selected image.

Next, let's move on to the JavaScript part. We will write a function that will be triggered whenever the file input value changes. This function will update the source attribute of the image element with the selected image. Here's the JavaScript code:

Javascript

const fileInput = document.getElementById('file-input');
const imagePreview = document.getElementById('image-preview');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    imagePreview.src = e.target.result;
  };

  reader.readAsDataURL(file);
});

In this code snippet, we first get references to the file input and image elements using their respective ids. We then add an event listener to the file input that listens for changes in the selected file.

When a change occurs, we retrieve the selected file using `fileInput.files[0]` and create a new `FileReader` object. We set up a callback for the `onload` event of the `FileReader`, which will update the src attribute of the image element with the data URL of the selected image.

And that's it! Now, every time a user selects an image file, the image will be displayed instantly on the webpage.

But wait, there's more! How about changing the color of the displayed image? You can easily achieve this by adding a CSS filter to the image element in your HTML or through JavaScript to apply it dynamically.

For example, you can add a CSS filter directly to your image tag:

Html

<img id="image-preview" src="" alt="Preview">

Or you can apply the filter dynamically through JavaScript when setting the image source:

Javascript

reader.onload = function(e) {
  imagePreview.src = e.target.result;
  imagePreview.style.filter = 'grayscale(100%)'; // Change the filter type and value as desired
};

By adding CSS filters, you can creatively manipulate the appearance of the image based on user input.

In conclusion, with a bit of HTML, JavaScript, and CSS magic, you can create a delightful user experience where users can see a preview of the images they select and even apply fancy effects to spice things up. So, go ahead and try out this cool trick in your next project!

Related posts:

×