强制“文件”输入元素（必需）答案

【问题标题】：Making 'file' input element mandatory (required)强制“文件”输入元素（必需）
【发布时间】：2019-10-26 18:18:59
【问题描述】：

我想强制（一个 HTML）“文件”输入元素：类似于

<input type='file' required = 'required' .../>

但它不起作用。

我看到了这本 WW3 手册，其中指出“必需”属性是 HTML 5 的新特性。但我没有在不支持新功能的项目中使用 HTML 5。

有什么想法吗？

【问题讨论】：

你需要 JavaScript。
@MadaraUchiha javascript 选项也不错。请告诉。
请提供更多的 HTML 文件。我假设您在某处有一个提交按钮？附加一个javascript函数，断言文件输入字段是否为空，如果为空则返回错误消息。
@Pekka웃 我先在那里。抱歉没找到！！
@Bere 是的，这并不像我最初想象的那么容易。似乎这可能还没有被问到（这在 Stack Overflow 上是很少见的：）

标签： html css

【解决方案1】：

感谢 HTML5，就这么简单：

<input type='file' required />

示例：

<form>
  <input type='file' required />
  <button type="submit"> Submit </button>
</form>

【讨论】：

【解决方案2】：

你可以像这样使用 Jquery 来做到这一点：-

<script type="text/javascript">
$(document).ready(function() {
    $('#upload').bind("click",function() 
    { 
        var imgVal = $('#uploadfile').val(); 
        if(imgVal=='') 
        { 
            alert("empty input file"); 
            return false; 
        } 


    }); 
});
</script> 

<input type="file" name="image" id="uploadfile" size="30" /> 
<input type="submit" name="upload" id="upload"  class="send_upload" value="upload" />

【讨论】：

谢谢。但形式是复杂的。我希望我的解决方案尽可能独立于任何其他（表单）元素。我不想使用（绑定）“提交”按钮（或其任何属性）。有没有其他办法？
可以发一下表格结构吗？
元素及其属性在 Joomla XML 文件中定义。表单元素名称和 ID 在显示之前由 CMS 更改/操作。恐怕如果有人更改 XML 中引用的表单元素的名称，可能会生成完全不同的名称/ID 对。结果我可能会失去联系。我至少希望元素变得独立于具体依赖其他表单元素。

【解决方案3】：

截至 2017 年，我能够做到这一点-

<input type='file' required />

当您提交表单时，它会要求您提供文件。

【讨论】：

我喜欢这个想法，但这对我的情况没有影响（Laravel 中的表格）。不幸的是：/
@daneczech 可能你没有在你的html 中使用<form> 标记

【解决方案4】：

您可以创建一个在表单提交时执行的 polyfill。例如：

/* Attach the form event when jQuery loads. */
$(document).ready(function(e){

/* Handle any form's submit event. */
    $("form").submit(function(e){

        e.preventDefault();                 /* Stop the form from submitting immediately. */
        var continueInvoke = true;          /* Variable used to avoid $(this) scope confusion with .each() function. */

        /* Loop through each form element that has the required="" attribute. */
        $("form input[required]").each(function(){

            /* If the element has no value. */
            if($(this).val() == ""){
                continueInvoke = false;     /* Set the variable to false, to indicate that the form should not be submited. */
            }

        });

        /* Read the variable. Detect any items with no value. */
        if(continueInvoke == true){
            $(this).submit();               /* Submit the form. */
        }

    });

});

此脚本等待表单提交，然后循环通过每个具有required 属性的表单元素输入一个值。如果所有内容都有值，则提交表单。

要检查的示例元素可以是：

<input type="file" name="file_input" required="true" />

（在您的网站上使用时，您可以删除 cmets 并缩小此代码）

【讨论】：

【解决方案5】：

var imgVal = $('[type=file]').val();

类似于 Vivek 的建议，但现在您有了一个更通用的输入文件选择器，并且您不依赖特定的 ID 或类。

See this demo.

【讨论】：

这不是问题的真正答案。
@Pere 这个演示似乎是对这个问题的回答。

【解决方案6】：

以上所有陈述都是完全正确的。但是，恶意用户可能会在不使用您的表单的情况下发送 POST 请求以生成错误。因此，HTML 和 JS 虽然提供了一种用户友好的方法，但不会阻止此类攻击。为此，请确保您的服务器仔细检查请求数据以确保没有任何内容为空。

【讨论】：

【解决方案7】：

有时输入字段没有与表单绑定。我可能看起来在<form> and </form> 标签内，但它在这些标签之外。

您可以尝试将表单属性应用于输入字段，以确保它与您的表单相关。

<input type="file" name="" required=""  form="YOUR-FORM-ID-HERE"  />

希望对你有帮助。

【讨论】：

【解决方案8】：

https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/

<button onclick="myFunction()">Try it</button> 


<p id="geeks"></p> 

<script> 
    function myFunction() { 
        var inpObj = document.getElementById("gfg"); 
        if (!inpObj.checkValidity()) { 
            document.getElementById("geeks") 
                    .innerHTML = inpObj.validationMessage; 
        } else { 
            document.getElementById("geeks") 
                    .innerHTML = "Input is ALL RIGHT"; 
        } 
    } 
</script>

【讨论】：

欢迎来到 SO！当您回答问题时，请稍微解释一下您的答案。在这种情况下，还有 6 个答案，所以你应该暴露你的优点。