如何在不刷新页面的情况下清除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();
    }
});