如何正确使用HTML5文件阅读器onload方法

Question

我正在创建一个文件上传器，用户使用文件输入逐个选择图片，并使用HTML文件阅读器API将其添加到托盘（预览）。 我的问题是当第一张照片被选中时，当选择第二张照片时，当第三张照片被选中时，它被添加两次，当第三张照片被选中时，它被添加三次。这意味着第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时，它会触发一个函数之一。