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

我正在尝试检查字段是否为空，以防止用户提交空字段，因此我使用了以下代码：

$('#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不再重新加载页面。有什么建议吗？

- alin dradici

---

简短回答，你不能可靠地这样做。更长的回答是：在Chrome和Firefox中，您可以使用FormData.entries()来检索信息，但这些不受旧浏览器支持，当然也不支持IE。另一种选择是直接验证表单元素。还要注意，您应该删除async: false，因为使用它是极其不好的做法。 - Rory McCrossan

你没有检查file字段。 - TheValyreanGroup

TheValyreanGroup已经完成了，但页面仍然没有重新加载。 - alin dradici

Answer 1

作为谷歌搜索结果的顶部，对于任何搜索快速解决方案来检查FormData对象是否为空的人来说，FormData.entries()将返回一个迭代器。如果您在该迭代器上使用.next()方法，您将获得一个具有属性done和value的对象。因此，您可以检查该done属性以确定迭代器是否没有条目。这对我的需求有效：

formDataObject.entries().next().done

这是一个沙盒概念的证明：https://codesandbox.io/s/16v99w3o4（请查看控制台）

- Kyle Crossman

---

这是对问题的正确答案。 - Shaiful Islam

Answer 2

简短回答，您无法可靠地检查 FormData 包含的信息（与您最初的问题相同）。

在Chrome和Firefox中，您可以使用 FormData.entries（）检索信息，但这些不受旧浏览器的支持，当然也不支持IE。

另一种选择是直接验证表单元素-就像您正在做的那样-只是您错过了文件输入。还请注意，应该删除 async：false ，因为使用它是极其不好的做法。

要修复代码，请在 if 条件中检查文件输入的 val（）：

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

- Rory McCrossan

---

谢谢Rory，它有效了，但我想要在提交后重新加载页面。 - alin dradici

window.location.reload()。虽然这使得 AJAX 请求的意义变得不那么重要了。 - Rory McCrossan

Answer 3

为文件类型的输入框添加一个ID，并使用以下代码片段检查它是否有文件：

if(document.getElementById("file").files.length == 0 ){
    console.log("no files selected");
}

- Ricky Stam

Answer 4

formData.has('username'); // Returns false
formData.append('username', 'Chris');
formData.has('username'); // Returns true

- Md Joynul Abedin

---

请不要仅仅发布代码作为答案，还要提供解释您的代码是如何解决问题的。带有解释的答案通常更有帮助和更高质量，并且更有可能吸引赞同。 - Mark Rotteveel

Answer 5

我认为您也可以将数据转换为字符串并检查长度。

surveyData.toString().length

没有长度，没有数据。

- iamkeir