如何清除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();
    }
});