如何正確使用HTML5文件讀取器onload方法

Question

我正在創建文件上傳器，用戶使用文件輸入逐個選擇圖片，並使用HTML文件讀取器API將其添加到托盤（預覽）。 我的問題是，當第一張圖片被選中，當第二張照片被選中時，它被正確添加到托盤上，當第三張圖片被選擇時，它被添加兩次。這意味着n張第n張照片的預覽。我不知道你做錯了什麼，請幫忙。

mycode的

//Event handler for image upload button click 
    $('body').on('click', '#add-default-pic', function (event) { 
    event.preventDefault(); 

    $('#default-pic-chooser').trigger('click'); 
    //Wait for #photo file input to change 

    $('#default-pic-chooser').on('change', function() { 
     if ($('#default-pic-chooser').val() !== '') { 
      //Do checks to see if photo is valid 
      if (isImage($('#default-pic-chooser').val())) { 

      } else { 

       $('.info').html('Sorry your picture format is not supported'); 
       $('#infoModal').modal(); 
       return; 
      } 
     } 
     if (typeof (FileReader) != 'undefined') { 
      reader = new FileReader(); 
      //Run this function when file is ready 

      reader.onload = function (e) { 
       img = e.target.result; 
       $('.default-pics-area').append('<img src="' + img + '" style="padding:0px; width:auto; height:auto; max-width:100%; max-height:150px;"/>'); 
       // alert("whats on:"+img); 
       if ($('#default-pic-chooser').val() !== '') { 

        var route = base + '/pics/default/upload'; 
        var photo = document.getElementById('default-pic-chooser').files[0]; //grapping photo file 
        // uploadPhoto(route,photo); 
        upload(route, photo, 'photo'); 
       } 
      }; 
      //Trigger the onload function 

      reader.readAsDataURL($(this) [0].files[0]); 
     } else { 
      alert('OOPS! you wont be able to preview your image because your browser does not support this feature...'); 
     } 
    }); 
}); 

Answer 1

刪除$('#default-pic-chooser').on('change'....)出體外的點擊處理程序。

因爲每次你點擊#add-default-pic，你添加一個新的change處理函數的#default-pic-chooser。所以，當你觸發click，就會觸發功能，一個接一個。