欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2022-04-01 19:09:16
...
当前,我的程序设定是,前端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掉请求,发起第二次上传

相关标签: javascript php