javascript - 用ajaxform上传图片，是上传成功了，但是每次上传重新上传服务器多会比上一次多一张图片！

Question

代码如下.....迷惘

$(document).ready(function(){
    var options = {
        success:  showResponse,
        dataType: 'json'
    };
    $("#upload-avatar").on("click",function(){
        $('#image').click();
        $('#image').on('change', function(){
            $('#upload').ajaxForm(options).submit();
        });
    });
    $("#uploadavatar").on("click",function(){
        $("#upload-avatar").click();

    });
});

function showResponse(response)  {
    var filename = response.success;
    if(filename == "")
    {
        $("p_goods_img").html("图片上传失败");
        swal("图片上传失败", "", "error");
    } else {
        $("#p_goods_img").html(filename);
        $("#goods_img").val("");
        $("#goods_img").val(filename);
        swal("图片上传成功", "", "success");
    }
}

Answer 1

...
$('#image').on('change', function(){
    $('#upload').ajaxForm(options).submit();
});
...

上面这段代码不要放到这段代码的时间处理中：

$("#upload-avatar").on("click",function(){
...
});

否则每次点击#upload-avatar都会给#image增加一个change事件， 自然就可能导致多次ajax请求的触发。