How do i view an uploaded image in html?

I have a form that allows me with

to browse and select a file.

What I want to do is display that image immediately after the image has been selected. And this is before the "submit" button on the form has been pressed so the image almost certainly resides Client side. Can this be done?

asked Sep 11, 2012 at 11:41

Edward HastedEdward Hasted

3,0138 gold badges28 silver badges45 bronze badges

1

Here You Go:

HTML

Script:

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

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result).width(150).height(200);
    };

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

Live Demo

answered Sep 11, 2012 at 11:48

8

You can achieve this with the following code:

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});

Demo: http://jsfiddle.net/ugPDx/

Jim Jones

2,4286 gold badges24 silver badges43 bronze badges

answered Sep 11, 2012 at 11:45

XavierXavier

1,6323 gold badges27 silver badges45 bronze badges

3

This can be done using HTML5, but will only work in browsers that support it. Here's an example.

Bear in mind you'll need an alternative method for browsers that don't support this. I've had a lot of success with this plugin, which takes a lot of the work out of your hands.

answered Sep 11, 2012 at 11:47

KelvinKelvin

5,1291 gold badge23 silver badges36 bronze badges

1

• Coderzway
• September 7, 2021

Looking for a way to display the uploaded image in HTML using Javascript then you are at the right today in this tutorial guide I will show you how to display uploaded image in HTML using Javascript so follow up with me till the end.

Python Projects For Class 12 With Source Code

We have to use the HTML file upload input so that users are able to upload images or any type of files. In this tutorial we will just focusing on image input so we just want to make sure images are uploaded so to do that we will use the below input tag.

As you can see it is the regular input for file upload but with additional attribute which only accepts image files now let’s see how to display the uploaded image using Javascipt. So to display image you need to use the below HTML and Javascript code.

How to display uploaded image in HTML using Javascript with upload button

You can use the above code to display the uploaded image in HTML if you have tested this you can see the upload button then you can only select images after choosing one you can see the preview of the image on the website.

How to hide file upload button in HTML and replacing with text

Above I have shown how to display image with the regular upload button if you don’t like that button you can change it to text it is very easy you just have to make some small changes you can copy the below code and replace with the other one’s.

Post Views: 2,713

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles

Coding

Coderzway October 12, 2021

HTML

Coderzway September 7, 2021

Javascript

Coderzway September 6, 2021

How do I make an image preview in HTML?

How do I preview a file in HTML?

How do I select an image from my computer in HTML?

How can I view uploaded image in PHP?

$_FILES["file"]["name"]. "
"; $image=$_FILES["file"]["name"]; /* Displaying Image*/ $img="upload/". $image; echo ''; } } } else { echo "Invalid file"; } ?>