当前位置:Gxlcms > PHP教程 > javascript-多次ajax上传的图片,如何删除??

javascript-多次ajax上传的图片,如何删除??

时间:2021-07-01 10:21:17 帮助过:8人阅读

当前,我的程序设定是,前端ajax修改头像,然后,将修改后图片的上传到后端。
最后发现,当用户多次点击上传按钮时,图片会上传多次。不便删除。
各位大神,有什么好的建议吗?

回复内容:

当前,我的程序设定是,前端ajax修改头像,然后,将修改后图片的上传到后端。
最后发现,当用户多次点击上传按钮时,图片会上传多次。不便删除。
各位大神,有什么好的建议吗?

上传期间,屏蔽上传按钮

beforeSend: function () {
    // 禁用按钮防止重复提交
    $("#submit").attr({ disabled: "disabled" });
}

用benforeSend就可以了。。。

$.ajax({
    type: "",
    data: "",
    dataType: "",
    url: "",
    beforeSend: function () {
        // 禁用按钮防止重复提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        
    }
});

用户上传头像,上传后头像的命名可以为“user_用户ID”,每次新上传到服务端,根据名称删除原来的图片。

对于这种细节优化的建议:

  1. 拿到图片,点击上传之后,开始上传

  2. 每次拿到图片,可以存一下文件名+时间到变量里,当用户点击多次上传的时候,把文件名+时间和变量对比,如果一致,则不再处理这次请求(用户文件名+时间一致的情况太少,此处可略掉进一步容错处理了)

  3. 如果发现图片不一致,并且第一次请求还没有中断,则ajax abort掉请求,发起第二次上传

人气教程排行