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

Question

我正在尝试计算已经上传了多少文件，如果上传了超过10张图像，请清除输入字段，但将其他所有内容保留在表格中。

一切正常，使用此处的答案清除输入，并提供了对文件计数的功能。

问题是，如果上传的图像超过10张，它将清除所有输入字段，因为脚本会刷新页面，并且所有输入信息都会重置。 我希望仅清除多个上传输入字段，并且在这种情况下不刷新页面。

这是到目前为止的样子。

<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>

和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>

我以为我将不得不使用AJAX，但它还很新。

任何帮助表示赞赏。

Answer 1

您可以尝试以下方法：

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();
    }
});