Question

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

David Thomas的代码可以设置为按钮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>

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

3 个答案: