How to display the selected image in same HTML?

Question

I have a input tag of type "File" in my phonegap mobile application. I am selecting only images from that tag. Now my issue was How can we display the selected image in the same HTML, If user select the image the image should display in the HTML. Is it possible?

<input type="file" id="fileUploader" />
<img id="preview" src="#" alt="your image" />

javascript:

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

            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }

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

    $("#fileUploader").change(function(){
        readIMG(this);
    });

The selected image should display in the "selectedImage" Div. Is it possible? Any suggestions please

u mean i select image using File control and then it should show me Uploaded file? — Pratik, Jun 30 '14 at 08:48
Isn't this question same as [THIS](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded).?? — Justin George, Jun 30 '14 at 08:49
Google is your friend. Google your question before posting it here. @Precious — Justin George, Jun 30 '14 at 08:52
@vinod, try this http://stackoverflow.com/a/18457580/2501044 — Golda, May 12 '15 at 09:33

score 10 · Accepted Answer · answered Jun 30 '14 at 08:48

10

Try this method

add image in seleced div

<img id="preview" src="#" alt="your image" />

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

            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }

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

    $("#fileUploader").change(function(){
        readIMG(this);
    });

DEMO

answered Jun 30 '14 at 08:48

Sridhar R

19,414
6
36
35

For this I need to use Jquery.ui.css and jquery.ui.js ? – Vinod Jun 30 '14 at 11:12
@Precious no nedd it is jquery solution – Sridhar R Jun 30 '14 at 11:15
Need to use Only Jquery.js or Jquery.min.js also needed? – Vinod Jun 30 '14 at 11:20
I am using Jquery but it is not displaying the image. I am using same code which is posted by you – Vinod Jun 30 '14 at 11:25
I am working with mobile application using phonegap in android platform – Vinod Jun 30 '14 at 11:25
@Where you put this code,update the question with relevant code – Sridhar R Jun 30 '14 at 11:32
It should be in side that. – Sridhar R Jun 30 '14 at 11:51

How to display the selected image in same HTML?

1 Answers1