如何正确使用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，就会触发功能，一个接一个。