检查FormData是否为空

Question

所以我有一个这样的表格:

<form id="uploadimage" action="" method="post" enctype="multipart/form-data">                   
    <div class="text-inside">
        Selectati Categoria<br><select id="sc" name="selectCat"></select><br><br>
        Nume Produs<br><input id="numprod" type="text" name="input-text" /><br>
        Pret Produs<br><input id="pretprod" type="number" name="input-pret" /><br><br>
        <input type="file" name="file"><br><br>
        <input type="submit" name="sumit" value="Send" id="imgButton" class="button"  /><br><br>
    </div>              
</form>

我试图检查filelds是否为空以防止用户提交空字段,所以我使用了这个:

$('#uploadimage').on('submit',(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var name= $('#numprod').val();
    var pret = $('#pretprod').val();

    if(name && pret){
        $.ajax({
            url: 'connect.php',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(){
                alert('uploaded successuflly!');
            }
        });
    }else{alert('input fields cannot be left empty you num num!');}
}));

但我仍然可以提交没有选择文件,ajax不再重新加载页面.有什么建议我该怎么办？

Answer 1

简短的回答,您无法可靠地检查FormData包含信息(如您原来的问题所示).

在Chrome和Firefox中,您可以使用它FormData.entries()来检索信息,但旧版浏览器不支持这些信息,当然也不支持IE浏览器.

另一种方法是直接验证表单元素 - 正如您所做的那样 - 除了您错过了file输入.另请注意,您应该删除async: false使用它的非常糟糕的做法.

要修复代码,请检查条件val()中的file输入if:

$('#uploadimage').on('submit', function(e) {
    e.preventDefault();
    var name = $('#numprod').val().trim();
    var pret = $('#pretprod').val().trim();
    var file = $('input[type="file"]').val().trim(); // consider giving this an id too

    if (name && pret && file) {
        $.ajax({
            url: 'connect.php',
            type: 'POST',
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function(){
                alert('uploaded successuflly!');
            }
        });
    } else {
        alert('input fields cannot be left empty you num num!');
    }
});

Answer 2

由于这是 Google 的最高结果，对于任何搜索快速解决方案以检查 FormData 对象是否为空的人，FormData.entries()都将返回一个迭代器。如果您使用的.next()方法对迭代器，你会得到与属性的对象done和value。因此，您可以检查该done属性以确定迭代器是否没有条目。这适用于我的需求：

formDataObject.entries().next().done

还有一个沙盒概念证明：https : //codesandbox.io/s/16v99w3o4（检查控制台）