Question

我正在尝试使用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);
    });
  }
}

click here for jsfiddle

Answer 1

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

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

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

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

Answer 2

完成提取网址后，只需将文件输入的值设置为null：

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

    }
}

您遇到了问题，因为在选择相同图像后第二次因为相同的文件选择而导致change事件未被触发。现在添加this.value = null;代码后，我们将清除之前的文件选择，因此每次change事件都会被执行，无论您选择的是同一个文件还是不同的文件。

Jquery图像上传相同图像无上传问题

2 个答案: