如何在选择文件之前禁用提交按钮答案

【问题标题】：How to disable submit button until file is selected如何在选择文件之前禁用提交按钮
【发布时间】：2010-12-12 09:38:51
【问题描述】：

我有一个 HTML 文件上传页面，我需要禁用提交按钮，直到选择一个文件。然后提交按钮将被启用，用户可以上传。我假设我可以使用 jQuery 代码来查询文件上传字段的值，以查看是否已选择文件上传。而且我假设我可以检查每当焦点离开文件上传字段时。我担心某些浏览器可能会对此表现得很有趣，然后我的用户就无法上传任何文件。

有没有一种安全的方法来做到这一点，最好是使用 jQuery，这样我就不会有一些用户无法上传的危险？

【问题讨论】：

标签： javascript jquery forms file-upload jquery-validate

【解决方案1】：

这个 jQuery 应该可以工作，并且与文件输入的 change() 事件相关联。此代码还应用 disabled 属性，因此，如果用户禁用了 JavaScript，它不应阻止使用该表单：

$(document).ready(
    function(){
        $('input:submit').attr('disabled',true);
        $('input:file').change(
            function(){
                if ($(this).val()){
                    $('input:submit').removeAttr('disabled'); 
                }
                else {
                    $('input:submit').attr('disabled',true);
                }
            });
    });

JS Fiddle demo.

【讨论】：

这看起来应该可以。虽然我仍然有点害怕浏览器问题导致一些用户无法上传，但我想我只需要进行彻底的测试。我担心的是禁用的 JavaScript，我担心的是 JavaScript 的怪癖。

【解决方案2】：

更简单的方法是在用户实际提交表单时检查文件字段...这样您就不必查找表单更改。

$(function() {
   $('form').submit(function() {
      if(!$("form input[type=file]").val()) {
         alert('You must select a file!');
         return false;
      }
   });
});

此代码为Unobtrusive JavaScript，如果用户不支持JS，它不会弄乱表单。

【讨论】：

这在维基百科页面的意义上可能是“不引人注目的”，但在用户面前抛出一个阻止警报弹出窗口是非常突兀的。
而且，在我看来，允许用户在满足提交条件之前尝试提交表单充其量是令人沮丧的。

【解决方案3】：

可以为按钮 ID 设置 David Thomas 的代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=btInsert.ClientID %>').attr('disabled', true);
        $('input:file').change(
            function () {
                if ($(this).val()) {
                    $('#<%=btInsert.ClientID %>').removeAttr('disabled');
                }
                else {
                    $('#<%=btInsert.ClientID %>').attr('disabled', true);
                }
            });
    });
</script>

【讨论】：