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, Oct 25 '16 at 04:28

vijayP · Answer 1 · 2016-10-25T04:32:42.970

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 '16 at 04:32

answered Oct 25 '16 at 04:29

vijayP

11,432
5
25
40

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? – Leron Oct 25 '16 at 04:32
@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. – vijayP Oct 25 '16 at 04:35
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 – kannan D.S Oct 25 '16 at 04:38
1

@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. – Leron Oct 25 '16 at 04:39
@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 http://jsfiddle.net/q9Lx1Lss/23/ code. – vijayP Oct 25 '16 at 04:45
@Leron - If you try the OP's fiddle link then you can't append same image consecutively. By the way you can select same image one after another; but its not getting appended to the DOM. this is what issue faced by OP. – vijayP Oct 25 '16 at 04:47
Just a suggestion: use `URL.createObjectURL(file)` instead of using filereader – Endless Oct 25 '16 at 09:15
@Endless - thanks for suggestion but this code is as per code posted by OP. – vijayP Oct 25 '16 at 09:22

Jquery image upload same image not uploading issue

1 Answers1