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

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小提琴演示.