Guide to showcasing an image that has been uploaded by me

Question

Guide to showcasing an image that has been uploaded by me

I have created a button that allows users to input an image, but I am struggling to display the picture on the screen. I tried creating an empty `img` element and changing its URL based on what I saw on another website, but it was not successful.

Here is the HTML code:

<input 
                     id="myImage"
                     class="photo-upload"
                     type="file"
                     accept="image/*, image/jpeg">

                     <img id="the-picture" width="200" />

And here is the JavaScript code:

const uploadPictureButton = document.querySelector(".photo-upload");

                     uploadPictureButton.addEventListener("click", displayPicture);

                     function displayPicture(event) {
                         let image = document.getElementById("myImage");
                         image.src = URL.createObjectURL(event.target.files[0]);
                     };

javascript image input display

Answer 1

Answer №1

The code needed some adjustments to read the file and generate a URL. Below is the corrected snippet for the code:

const uploadPictureButton = document.querySelector(".photo-upload");

  uploadPictureButton.addEventListener('change', function () {
    displayPicture(this);
  });

 function displayPicture(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      document.getElementById('the-picture').setAttribute('src', e.target.result);
    };

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

 <input 
     id="myImage"
     class="photo-upload"
     type="file"
     accept="image/*, image/jpeg">

<img id="the-picture" width="200" />

Answer 2

The code needed some adjustments to read the file and generate a URL. Below is the corrected snippet for the code:

const uploadPictureButton = document.querySelector(".photo-upload");

  uploadPictureButton.addEventListener('change', function () {
    displayPicture(this);
  });

 function displayPicture(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      document.getElementById('the-picture').setAttribute('src', e.target.result);
    };

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

 <input 
     id="myImage"
     class="photo-upload"
     type="file"
     accept="image/*, image/jpeg">

<img id="the-picture" width="200" />

Answer 3

Answer №2

To showcase an image, consider utilizing the innerHTML method.

Answer 4

To showcase an image, consider utilizing the innerHTML method.

Answer 5

Answer №3

This solution has been quite effective for me

<img height="100" width="100" alt="profile picture" id="previewImage"> <input type="file" onchange="document.querySelector("#previewImage").src = window.URL.createObjectURL(this.files[0])">

Answer 6

This solution has been quite effective for me

<img height="100" width="100" alt="profile picture" id="previewImage"> <input type="file" onchange="document.querySelector("#previewImage").src = window.URL.createObjectURL(this.files[0])">

Guide to showcasing an image that has been uploaded by me

Answer №1

Answer №2

Answer №3

Similar questions

Surprising Behavior of React's OnClick Event

Creating a customizable React application with an extra environmental setting

Ensure that the button click is validated repeatedly until it becomes disabled by utilizing

What is the reason behind Firefox opting for a 2x image while Chrome goes for a 1x image when the devicePixelRatio is 1

Bootstrap Carousel is unable to display any items as the count returns zero

What is the process for transferring the value from a list item to the search field box?

Tips for adding information into IndexedDB after receiving an AJAX response:

Looking to adjust the title font size when exporting DataTable to Excel?

What causes reCaptcha to vanish when I switch to a different page?

Modify the information within several div sections

How can I make the row color of a jQuery datatable change when the row is selected?

What is the best way to utilize regex to replace two elements simultaneously?

Tips to avoid multiple HTTP requests being sent simultaneously

Adding images in ascending order according to the parent div's ID

Ways to make nodejs return a different value instead of an object promise

What is the reason behind the fact that the "transform" property of document.getElementById().style.transform="translateX()" only translates the element once?

JQuery's addClass function is not functioning properly

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

"Send the response in ExpressJS before making a request to loop through the

Extracting responseXML data specifically for CSS styling purposes