如何清除HTML多文件上传而无需刷新页面

Question

I am trying to count how many files have been uploaded, if over 10 images are uploaded then clear the input field but keep everything else in the form.

Everything works great, used the answer from here to clear input and made a function to count files.

The issue is if there are more than 10 images uploaded it clears all input fields because the script refreshes the page and all input information is reset. I'm looking to only clear the multiple upload input field and not have the page refresh when that happens.

Heres what it looks like so far.

<div class="form-group">
    <label for="post_gallery_img">Gallery Images</label>
    <input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
</div>

And the Jquery:

<script>
  $("#galleryImgs").on("change", function() {
    if($("#galleryImgs")[0].files.length < 11) {
        window.reset2 = function (e) {
            e.wrap('<form>').closest('form').get(0).reset();
            e.unwrap();
        }
    } else {
        $("#addPostsForm").submit();
    }
});
</script>

I am thinking I am going to have to use AJAX, but quite new to it.

Any help is appreciated.

Answer 1

You may try something like:

HTML:

<form id="addPostsForm">
<div class="form-group">
    <label for="post_gallery_img">Gallery Images</label>
    <input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
</div>
<br>
<!--<input type="reset" value="Reset">-->
</form>

JS:

$("#galleryImgs").on("change", function() {
    if($("#galleryImgs")[0].files.length < 11) {
        alert("Now reset file input");
        //This code line resets the file input
        $('#galleryImgs').val("");
        alert("The file input has now been reset");
    } else {
        $("#addPostsForm").submit();
    }
});