Jquery image upload same image not uploading issue

Question

am trying to upload multiple images using jquery. but same images are not uploading. how to solve this issue please check my fiddle

$images = $('.imageOutput')
$(".imageUpload").change(function(event){
  readURL(this);
});
function readURL(input) {
  if (input.files && input.files[0]) {
    $.each(input.files, function() {
      var reader = new FileReader();
      reader.onload = function (e) {           
        $images.append('<img src="'+ e.target.result+'" />')
      }
      reader.readAsDataURL(this);
    });
  }
}

click here for jsfiddle

Not certain what issue is? javascript at jsfiddle appeared to return expected result. No images are uploaded at jsfiddle. Images are read by FileReader then appended to document. — guest271314
– guest271314, Commented Oct 25, 2016 at 4:28

vijayP · Accepted Answer · 2016-10-25 04:32:42Z

3

Just set the value of your file input to null once you are done with fetching the URL like below:

http://jsfiddle.net/q9Lx1Lss/23/

$images = $('.imageOutput')


$(".imageUpload").change(function(event){
    readURL(this);
    this.value = null; //setting the value to null
});



function readURL(input) {

    if (input.files && input.files[0]) {

        $.each(input.files, function() {
            var reader = new FileReader();
            reader.onload = function (e) {           
                $images.append('<img src="'+ e.target.result+'" />')
            }
            reader.readAsDataURL(this);
        });

    }
}

You were getting issue because on second time after selecting the same image, change event was not getting fired because of same file selection. Now after adding this.value = null; code we are clearing the previous file selection and hence every time change event will get executed irrespective of whether you select same file or different one.

edited Oct 25, 2016 at 4:32

answered Oct 25, 2016 at 4:29

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Leron Over a year ago

Hmm, I think we have the same issue here. Don't you think that something like if (input.files && input.files[0]) ) { $('.imageOutput').empty(); is what he needs?

vijayP Over a year ago

@Leron - $('.imageOutput').empty(); and this.value = null; is same. Only thing is that; such code needs to be executed after $.each(input.files otherwise we will not get the file selected by the user.

kannan D.S Over a year ago

var f = $('.imageOutput').prop("files")[i]['name']; var reader = new FileReader(); reader.readAsDataURL(this); this is my code , iset reader value empty but not getting output

Leron Over a year ago

@vijayP It's not the same. I don't really understand the real problem of the OP, but using empty after the check has different result than yours this.value = null.

vijayP Over a year ago

@kannanD.S - Please have a look at updated fiddle. there I can select same image consecutively N number of time and same gets appended one after other. Please compare your code with jsfiddle.net/q9Lx1Lss/23 code.

|

Collectives™ on Stack Overflow

Jquery image upload same image not uploading issue

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related