blocks|key|2012649|text|多亏了HTML5，一切都变得如此简单：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2012650|<input+type='file'+required+/>|code-block|syntax|javascript|2012651|示例：|2012652|​|2012653|<form>
++<input+type='file'+required+/>
++<button+type="submit">+Submit+</button>
</form>|2012654|2012655|entityMap^0|0|J|0|0|0|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|10|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|Q|3|N|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p><strong>Thanks to HTML5, it is as easy as this:</strong></p>

<pre><code>&lt;input type='file' required /&gt;
</code></pre>

<p><strong>Example:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;input type='file' required /&gt;
  &lt;button type="submit"&gt; Submit &lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1626544|text|你可以像这样使用Jquery来完成：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1626545|<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"+/>|code-block|syntax|javascript|1626546|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do it using Jquery like this:-</p>

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


    }); 
});
&lt;/script&gt; 

&lt;input type="file" name="image" id="uploadfile" size="30" /&gt; 
&lt;input type="submit" name="upload" id="upload"  class="send_upload" value="upload" /&gt;
</code></pre>


blocks|key|5540724|text|从现在起2017年，我可以做到这一点-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5540725|<input+type='file'+required+/>|code-block|syntax|javascript|5540726|当你提交表格时，它会要求你提交文件。|5540727|📷|atomic|offset|length|5540728|​|5540729|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7744a6211e54558d211e4d9aa9de2368.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|11|8|@]|9|@$L|12|M|13|1|14]]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]]]

<p>As of now in 2017, I am able to do this-</p>

<pre><code>&lt;input type='file' required /&gt;
</code></pre>

<p>and when you submit the form, it asks for file.
<a href="https://i.stack.imgur.com/o7tYa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/o7tYa.png" alt="Screenshot on Google Chrome"></a></p>


blocks|key|2012570|text|您可以创建一个在表单提交上执行的polyfill。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2012571|/*+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.+*/
++++++++}

++++});

});|code-block|syntax|javascript|2012572|此脚本等待表单提交，然后循环遍历每个具有required属性的表单元素都有一个输入值。如果所有内容都有值，它就会提交表单。|offset|length|style|CODE|2012573|要检查的示例元素可以是：|2012574|<input+type="file"+name="file_input"+required="true"+/>|2012575|(当你在你的网站上使用它时，你可以删除评论并缩小代码)|2012576|entityMap^0|0|0|K|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>You could create a polyfill that executes on the form submit. For example:</p>

<pre><code>/* 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. */
        }

    });

});
</code></pre>

<p>This script waits for the form to be submitted, then loops though each form element that has the <code>required</code> attribute has a value entered. If everything has a value, it submits the form.</p>

<p>An example element to be checked could be:</p>

<pre><code>&lt;input type="file" name="file_input" required="true" /&gt;
</code></pre>

<p>(You can remove the comments &amp; minify this code when using it on your website)</p>


blocks|key|4122632|text|var+imgVal+=+$('[type=file]').val();+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4122633|与Vivek的建议类似，但是现在您有了一个更通用的输入文件选择器，并且不依赖于特定的ID或类。|unstyled|4122634|。|4122635|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>var imgVal = $('[type=file]').val(); 
</code></pre>

<p>Similar to Vivek's suggestion, but now you have a more generic selector of the input file and you don't rely on specific ID or class.</p>

<p><a href="http://jsfiddle.net/7GQjL/" rel="nofollow"><strong>See this demo</strong></a>.</p>


blocks|key|5540788|text|以上所有陈述都是完全正确的。但是，恶意用户可能会在不使用您的表单的情况下发送POST请求以生成错误。因此，HTML和JS虽然提供了一种用户友好的方法，但并不能防止这类攻击。为此，请确保您的服务器仔细检查请求数据，以确保没有任何数据为空。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5540789|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>All statements above are entirely correct. However, it is possible for a malicious user to send a POST request without using your form in order to generate errors. Thus, HTML and JS, while offering a user-friendly approach, will not prevent these sorts of attacks. To do  so, make sure that your server double checks request data to make sure nothing is empty.</p>


blocks|key|2012715|text|有时，输入字段不与表单绑定。我可能看起来在<form>+and+</form>标记内，但它在这些标记之外。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2012716|您可以尝试将表单属性应用于输入字段，以确保它与您的表单相关。|2012717|<input+type="file"+name=""+required=""++form="YOUR-FORM-ID-HERE"++/>|code-block|syntax|javascript|2012718|我希望它能帮上忙。|2012719|entityMap^0|L|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Some times the input field is not bound with the form.
I might seem within the <code>&lt;form&gt; and &lt;/form&gt;</code> tags but it is outside these tags. </p>

<p>You can try applying the form attribute to the input field to make sure it is related to your form.</p>

<pre><code>&lt;input type="file" name="" required=""  form="YOUR-FORM-ID-HERE"  /&gt;
</code></pre>

<p>I hope it helps.</p>


blocks|key|1626628|text|https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1626629|<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>+|code-block|syntax|javascript|1626630|entityMap|0|LINK|mutability|MUTABLE|url^0|0|2O|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|4]]]]

<p><a href="https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/" rel="nofollow noreferrer">https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/</a> 
  </p>

<pre><code>&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt; 


&lt;p id="geeks"&gt;&lt;/p&gt; 

&lt;script&gt; 
    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"; 
        } 
    } 
&lt;/script&gt; 
</code></pre>


<p>I want to make (an HTML) 'file' input element mandatory: something like</p>

<pre><code>&lt;input type='file' required = 'required' .../&gt;
</code></pre>

<p>But it is not working.</p>

<p>I saw this <a href="http://www.w3.org/TR/html-markup/input.file.html#input.file.attrs.required" rel="noreferrer">WW3</a> manual which states 'required' attribute is new to HTML 5. But I am not using HTML 5 in the project I am working which doesn't support the new feature.</p>

<p>Any idea?</p>


Making 'file' input element mandatory (required)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想让(一个HTML) 'file‘input元素成为强制的:类似于<input type='file' required = 'required' .../>但它不起作用。我看过这本手册，上面说“必需的”属性是HTML5的新特性，但我没有在我正在工作的项目中使用HTML5，因为它不支持新特性。有什么想法吗？

问强制使用'file‘输入元素(必需)
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制使用'file‘输入元素(必需)EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问强制使用'file‘输入元素(必需)
EN