javascript - How to delete images uploaded multiple times via ajax? ?

Currently, my program setting is that the front-end ajax modifies the avatar, and then uploads the modified image to the back-end.
Finally, it was discovered that when the user clicks the upload button multiple times, the image will be uploaded multiple times. Inconvenient to delete.
Dear masters, do you have any good suggestions?

Reply content:

Currently, my program setting is that the front-end ajax modifies the avatar, and then uploads the modified image to the back-end.
Finally, it was discovered that when the user clicks the upload button multiple times, the image will be uploaded multiple times. Inconvenient to delete.
Dear masters, do you have any good suggestions?

During uploading, block the upload button

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

Just use benefitSend. . .

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

The user uploads an avatar, and the name of the uploaded avatar can be "user_user ID". Each time it is uploaded to the server, the original image will be deleted according to the name.

Suggestions for this kind of detail optimization:

1. Get the picture and click upload to start uploading

2. Every time you get a picture, you can save the file name + time into a variable. When the user clicks to upload multiple times, compare the filename + time with the variable. If they are consistent, it will not be processed this time. Request (there are too few cases where the user file name + time are consistent, further fault tolerance processing can be omitted here)

3. If the images are found to be inconsistent and the first request has not been interrupted, then ajax abortabort the request and initiate a second upload