CODEWITHSUNDEEP
jqueryhtmljquery-mobilecordova
Vinod
Vinod

Reputation: 2311

How to display the selected image in same HTML?

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

Upvotes: 0

Views: 16098

Answers (1)

Sridhar R
Sridhar R

Reputation: 20418

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

Upvotes: 10

Related Questions