CODEWITHSUNDEEP
javascripthtml
Elyor
Elyor

Reputation: 5532

How to remove selected image from html input

For example I have this form

<form>
 <input type='file' id="imgInp" />
 <img id="blah" src="#" alt="your image" />
</form>

And this script to show image

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);
});

I wanna put a button to remove the selected image, like:

<a href="#">remove</a>

How can we do this?

DEMO

Upvotes: 1

Views: 5080

Answers (1)

snvrthn
snvrthn

Reputation: 385

Create "remove" link in the form which is initially hidden.

<form>
  <input type='file' id="imgInp" />
  <a style="display:none;" id="removeImage" href="#">Remove</a>
  <img id="blah" src="#" alt="your image" />
</form>

And in the javascript file,

 $("#imgInp").change(function() {
   readURL(this);
   $("#removeImage").toggle(); // show remove link
 });

 $("#removeImage").click(function(e) {
   e.preventDefault(); // prevent default action of link
   $('#blah').attr('src', ""); //clear image src
   $("#imgInp").val(""); // clear image input value
   $("#removeImage").toggle(); // hide remove link.
 });

Upvotes: 1

Related Questions