CODEWITHSUNDEEP
javascriptjqueryconditional-statements
Affan Ahmad
Affan Ahmad

Reputation: 451

How to show image while image select

I am using javascript code.this code show the image which image you select before uploading.

Javascript

<script>
 function readURL(input) {

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

    reader.onload = function (e) {

        $('#blah').attr('src', e.target.result);
     }

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

      $("#imgInp").change(function(){
      readURL(this);
  });
 </script>

Html

 <form id="imageform" method="post" enctype="multipart/form-data" >
       <input type="file" name="photoimg" id="imgInp" >
       <img id="blah" src="#" alt="your image" />
       <input type="submit" Value="Upload">
       </form>

This piece of code work perfectly.SO i need normaly when image not select than image dispaly:none; and if image select than show image.i want to handle this problem with client side scripting.

Upvotes: 1

Views: 360

Answers (2)

Eir&#237;kur Fannar Torfason
Eir&#237;kur Fannar Torfason

Reputation: 1010

Modify the markup so that the image is hidden by default:

<img id="blah" src="#" alt="your image" style="display:none" />

And then call the jQuery show method on the image when you have read the file like so:

$('#blah').attr('src', e.target.result);
$('#blah').show();

Fiddle is here

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').prop('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

jQuery(function () {
    $("#imgInp").change(function () {
        readURL(this);
    });
})

Demo: Fiddle

Upvotes: 0

Related Questions