jQuery file upload preview/remove image not working properly

Question

You can find the working file at Jsfiddle

/* JavaScript */

function readURL() {
	var $input = $(this);
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) { 
            $input.next('.blah').attr('src', e.target.result).show();
            $input.after('<input type="button" class="delbtn" value="remove">');
        }
        reader.readAsDataURL(this.files[0]);
    }
    }

    $(".imgInp").change(readURL); 

    $("form").on('click', '.delbtn', function(e) { 
		var $input = $(this); 
        $input.next('.blah').attr('src', e.target.result).hide();   
        $input.prev('.imgInp').val(""); 
        $(this).closest(".delbtn").remove();    
});

<form name="" action="" method="post">
  <div class="div">
    <input type='file' class="imgInp blah" />
    <img class="blah" src="#" alt="your image"/></div>
  <br>
  <br>
  <div class="div">
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image"/></div>
</form>

Display and remove image is working fine.

But if the image already selected and again select another new image then preview function is not working. Also remove button keep adding. Please check the error image below.

Click to view the error

I have fixed your issue. Please have a look.

Aruna
– Aruna

2016-11-13 11:50:04 +00:00
Commented Nov 13, 2016 at 11:50 — Aruna
– Aruna, Commented Nov 13, 2016 at 11:50
@Aruna thanks its working fine :)

user7152572
– user7152572

2016-11-13 11:52:32 +00:00
Commented Nov 13, 2016 at 11:52 — user7152572
– user7152572, Commented Nov 13, 2016 at 11:52

Aruna · Accepted Answer · 2016-11-13 11:49:34Z

I have updated your fiddle at following link,

https://jsfiddle.net/balasuar/97dzkf70/20/

When first time you select the image, the next element of the button is the image. But once the image selected, you added theRemove button element next to the file control. So the next time, it breaks as the image is no longer next to the file control.

I fixed it below by having a reset method to clear this.

function readURL() {
    var $input = $(this);
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) { 
            reset($input.next('.delbtn'), true);
            $input.next('.blah').attr('src', e.target.result).show();
            $input.after('<input type="button" class="delbtn" value="remove">');
        }
        reader.readAsDataURL(this.files[0]);
    }
}

$(".imgInp").change(readURL); 

$("form").on('click', '.delbtn', function(e) { 
        reset($(this));   
});

function reset(elm, prserveFileName){
  if(elm && elm.length > 0) {
    var $input = elm; 
        $input.next('.blah').attr('src', '').hide(); 
        if(!prserveFileName){
          $input.prev('.imgInp').val(""); 
        }
        elm.remove(); 
  }
}

Collectives™ on Stack Overflow

jQuery file upload preview/remove image not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related