how to clear user uploaded images if the limit of files exceeded in jquery

May 7, 2022

i have a simple form where a user can upload multiple images, i only want the user to upload 4images at once, so i did the following

$("#myfile").on("change", function() {
    if ($("#myfile")[0].files.length > 4) {
        alert("You can select only 4 images");
    } 
});

<input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">

this gives an alert when user uploads images more than 4 but doesnt stop him from submitting the form, can anyone please tell me how to clear the user uploaded images if the limit exceeds or dsable the submit button, thanks in advance

>Solution :

I will implement the disable attribute strategy as I said in the comments:

$("#myfile").on("change", function() {
if ($("#myfile")[0].files.length > 4) {
    alert("You can select only 4 images");
    $(".form-control").prop("disabled",true);
 } 
});

With the above code the user will not be able to submit the form