Jquery圖像上傳相同圖像無上傳問題

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

點擊這里查看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

完成提取URL后，只需將文件輸入的值設置為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事件都將被執行。