Javascript Jquery图像上载相同图像未上载问题

我正在尝试使用jquery上传多个图像。但同样的图片没有上传。如何解决这个问题请检查我的小提琴

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

$images=$（'.imageOutput'）
$（“.imageUpload”）.change（函数（事件）{
readURL（this）；
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
$.each（input.files，function（））{
var reader=new FileReader（）；
reader.onload=函数（e）{
$images.append（“”）
}
reader.readAsDataURL（this）；
});
}
}

---

只要在获取URL后将文件输入值设置为

null

，如下所示：

$images=$（'.imageOutput'）
$（“.imageUpload”）.change（函数（事件）{
readURL（this）；
this.value=null；//将值设置为null
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
$.each（input.files，function（））{
var reader=new FileReader（）；
reader.onload=函数（e）{
$images.append（“”）
}
reader.readAsDataURL（this）；
});
}
}

---

您遇到问题的原因是，在选择相同的图像后的第二次，由于选择了相同的文件，

change

事件未被触发。现在添加

this.value=null代码我们正在清除以前的文件选择，因此每次
更改
事件都将被执行，而不管您选择的是相同的文件还是不同的文件。
只需在完成以下URL获取后，将文件输入的值设置为
null
：


$images=$（'.imageOutput'）
$（“.imageUpload”）.change（函数（事件）{
readURL（this）；
this.value=null；//将值设置为null
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
$.each（input.files，function（））{
var reader=new FileReader（）；
reader.onload=函数（e）{
$images.append（“”）
}
reader.readAsDataURL（this）；
});
}
}

您遇到问题的原因是，在选择相同的图像后的第二次，由于选择了相同的文件，
change
事件未被触发。现在添加
this.value=null代码我们正在清除以前的文件选择，因此每次
更改
事件都将执行，无论您选择的是相同的文件还是不同的文件。
如果您尝试上载相同的文件，则文件输入的值不会更改。尝试打印出来：

    $('.button-2').click(function(){
        console.log($(".list .upload-file").val())
        return false;
    });

或者如果要上传两次，请使用此选项，清除文件输入值

    $('input[type="file"]').val(null);
 http://jsfiddle.net/cfddream/BF8Gc/

如果尝试上载同一文件，则文件输入的值不会更改。尝试打印出来：

    $('.button-2').click(function(){
        console.log($(".list .upload-file").val())
        return false;
    });

或者如果要上传两次，请使用此选项，清除文件输入值

    $('input[type="file"]').val(null);
 http://jsfiddle.net/cfddream/BF8Gc/

无法复制。有解决此问题的想法吗？不确定是什么问题javascript
似乎返回了预期结果。JSFIDLE上没有上载图像。图像由
FileReader
读取，然后附加到
document
中。使用
html
而不是
append
无法复制。有没有解决此问题的方法？不确定是什么问题javascript
似乎返回了预期结果。JSFIDLE上没有上载图像。图像由
FileReader
读取，然后附加到
document
中。使用
html
而不是
append
Hmm，我想我们这里也有同样的问题。你不认为像
if（input.files&&input.files[0]）{$（'.imageOutput'）.empty（）；
这样的东西是他需要的吗？@Leron-
$（'.imageOutput'）.empty（）；
和
this.value=null；
是一样的。唯一的问题是，这样的代码需要在
$之后执行（input.files
否则我们将无法获取用户选择的文件。var f=$（'.imageOutput'）.prop（“文件”）[i]['name']；var reader=new FileReader（）；reader.readAsDataURL（此）；这是我的代码，iset reader值为空，但无法获取output@vijayP这不一样。我不太明白OP的真正问题，但在检查后使用empty与您的this.value=null有不同的结果。@kannanD.s-请查看更新的fiddle。在这里，我可以连续多次选择相同的图像和same一个接一个地被追加。请将您的代码与代码进行比较。嗯，我想我们这里也有同样的问题。您不认为类似于
if（input.files&&input.files[0]）{$（'.imageOutput'）.empty（）；
是他需要的吗？@Leron-
$（'.imageOutput'）.empty（）
和
this.value=null；
是相同的。唯一的问题是；这样的代码需要在
$之后执行。每个（input.files
否则我们将无法获得用户选择的文件。var f=$（'.imageOutput'）.prop（“files”）[i]['name']；var reader=new FileReader（）；reader.readAsDataURL（this）；这是我的代码，iset reader值为空，但无法获取output@vijayP这不一样。我不太明白OP的真正问题，但在检查后使用empty与您的this.value=null有不同的结果。@kannanD.s-请查看更新的fiddle。在这里，我可以连续多次选择相同的图像和sam一个接一个地追加e。请将您的代码与代码进行比较。