使用jQuery驗證至少1個文件輸入

Question

如何使用jQuery確保至少一個字段具有選定的文件？ 這是我的表格：

<form action="b.php">
    <input type="file" name="file[]">
    <input type="file" name="file[]">
    <input type="file" name="file[]">
    <input type="file" name="file[]">
    <input type="submit" value="Value">
</form>

Answer 1

要實現此目的，您可以使用map()來構建所有有效文件input元素的數組。 然后，您可以檢查此數組中是否包含任何元素。 如果是，則至少有一個輸入有效，如果它是空的則沒有選擇任何內容。 嘗試這個：

var validFields = $('input[type="file"]').map(function() {
    if ($(this).val() != "") {
        return $(this);
    }
}).get();    

if (validFields.length) {
    console.log("Form is valid");
} else {
    console.log("Form is not valid");
}

示例小提琴

Answer 2

您可以使用jQuery的.val()方法來檢查是否已設置了值，但我不知道它是否適用於文件輸入類型。

但是，您應該使用服務器端語言來驗證文件，因為如果您使用的是javascript，瀏覽頁面的人只能禁用驗證。 只需循環遍歷file[]數組並檢查它是否為空。

這實際上更安全，更容易。

Answer 3

雖然您當然需要服務器端驗證，但有一些很好的技巧可以檢查是否有人在您的輸入元素中添加了文件。

現在，由於安全原因，您對文件輸入元素的訪問受到嚴格限制，因此您無法更改它。 但是，您可以檢查以下內容：

if($('input[type="file"]').val() != "") {
    alert("a file is selected")
}