Javascript 如何在不刷新页面的情况下清除HTML多文件上载

我试图计算有多少文件已上传，如果超过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>

$（“#gallerymgs”）。关于（“更改”，函数（）{
if（$（“#GalleryMgs”）[0].files.length<11）{
window.reset2=函数（e）{
e、 换行（“”）.closest（'form'）.get（0.reset（）；
e、 展开（）；
}
}否则{
$（“#addPostsForm”）.submit（）；
}
});

我想我将不得不使用AJAX，但对它来说还是很陌生的

---

感谢您的帮助

您可以尝试以下方法：

HTML:

画廊图片

JS:

$（“#GalleryMgs”）。关于（“更改”，函数（）{
if（$（“#GalleryMgs”）[0].files.length<11）{
警报（“现在重置文件输入”）；
//此代码行重置文件输入
$（'#gallerymgs'）.val（“”）；
警报（“文件输入现已重置”）；
}否则{
$（“#addPostsForm”）.submit（）；
}
});

您实际尝试了什么？谷歌怎么说？为什么您认为您必须使用ajax？还有，您所说的“超过X个图像的数量才能清除输入”是什么意思。X是多少？请花点时间编辑您的问题并重新编写，以便完全清楚发生了什么，因为您所说的毫无意义。@Soviut Ajax可用于不重新加载页面。为您更改了“X”，当您说“它清除字段”时，您能澄清您所说的“它”是什么意思吗？你的剧本有吗？或者浏览器会这样做？window.rest函数会清除输入。实际上，我正在尝试保留表单中的所有内容，如果上载了10个以上的文件，只需重置多文件输入字段。谢谢，虽然我现在已经编辑了我的代码。现在只需重置输入文件元素。让我知道它是否对您有效。遗憾的是，它仍然不起作用，我认为这是改变，因为如果我删除它并使用重置按钮，它将在不清除表单上的所有内容的情况下工作。

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

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