[FIXED] How to clear user uploaded images if the limit of files exceeded in jquery

Issue

I have a simple form where a user can upload multiple images. I only want the user to upload 4 images 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 the user uploads more than 4 images but doesn't stop them from submitting the form.

Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?

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

Answered By - Dimitris Papageorgiou

Answer Checked By - Marie Seifert (PHPFixing Admin)