如何正确使用HTML5文件reader的onload方法

Question

我正在创建一个文件上传器，用户可以在其中使用文件输入一张一张地选择图片，然后使用 HTML 文件 reader [=19= 将其添加到托盘（预览） ]. My problem is when the first picture is selected its added to the tray once correctly when the second photo is selected is added twice when the third is selected its added thrice.这意味着第 n 张照片的 n 次预览。我不知道做错了什么请帮忙。

我的代码

 //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，都会给#default-pic-chooser添加一个新的change处理函数。所以，当你触发click时，它会触发函数一个一个。

如何正确使用HTML5文件reader的onload方法

How to use HTML5 file reader onload method correctly

html

javascript

jquery

html5-filesystem

我的代码