如何禁用提交按钮，直到文件被选中

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

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

来源

2010-12-12 at.

这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。

来源

2010-12-12 10:21:17

这看起来应该起作用。尽管我仍然对浏览器问题感到有些害怕，导致一些用户无法上传，但我猜测我只需要进行彻底的测试。它被禁用JavaScript我担心，这是我担心的JavaScript怪癖。 – 2010-12-12 19:08:10

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

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

此代码是Unobtrusive JavaScript，它不会弄乱的形式，如果用户不支持JS。

来源

2010-12-12 09:50:00 Mickel

这可能是在维基百科页面意义上的“不显眼”，但在用户的面部泼阻塞警报弹出很突兀。 – adamse 2010-12-12 10:36:27

而且，在我看来，允许用户在满足提交条件之前尝试提交表单，这至少令人沮丧。 – 2010-12-12 12:04:57

大卫·托马斯的代码可以为按钮ID设置：

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

来源

2014-09-13 01:27:55

如何禁用提交按钮，直到文件被选中

回答

相关问题