Question

我正在尝试计算已上传的文件数量，如果上传的图像超过10张，则清除输入字段，但保留表单中的所有内容。

一切都很好用，使用here的答案来清除输入并创建一个计算文件的函数。

问题是如果上传的图像超过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();
    }
});

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

1 个答案: