如果 jquery 中超过文件限制，如何清除用户上传的图像

Question

我有一个简单的表单，用户可以在其中上传多张图片。我只希望用户一次上传 4 张图片，所以我做了以下操作：

$("#myfile").on("change", function() {
    if ($("#myfile")[0].files.length > 4) {
        alert("You can select only 4 images");
    } 
});

<input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">

这会在用户上传超过 4 张图片时发出提醒，但不会阻止他们提交表单。

谁能告诉我如果超过限制或禁用提交按钮如何清除用户上传的图片？

Answer 1

在这种情况下，最好再创建一个带有标志状态的变量，然后在提交表单之前检查它。

类似的东西：

let flag = false;

$("#myfile").on("change", function() {
    if ($("#myfile")[0].files.length > 4) {
        alert("You can select only 4 images");
        flag = true;
    }
});

if(!flag){
    $('#form').submit();
}

Answer 2

我会按照我在评论中所说的那样实现禁用属性策略：

$("#myfile").on("change", function() {
if ($("#myfile")[0].files.length > 4) {
    alert("You can select only 4 images");
    $(".form-control").prop("disabled",true);
 } 
});

使用上述代码，用户将无法提交表单

如果 jquery 中超过文件限制，如何清除用户上传的图像

How to clear user uploaded images if the limit of files exceeded in jquery

html

javascript

forms

jquery

image