Как отключить кнопку отправки до тех пор, пока не будет выбран файл

Question

У меня есть страница загрузки файла HTML, и мне нужно, чтобы кнопка отправки была отключена до тех пор, пока не будет выбран файл. Затем кнопка отправки будет включена и пользователь может загрузить. Я предполагаю, что я могу использовать код jQuery для запроса значения поля загрузки файла, чтобы узнать, был ли выбран файл для загрузки. И я предполагаю, что могу проверить, что всякий раз, когда фокус покидает поле загрузки файла. Меня беспокоит то, что некоторые браузеры могут смеяться с этим, а затем мои пользователи не могут загружать файлы.

Есть ли безопасный способ сделать это, желательно с помощью jQuery, где мне не грозит опасность загрузки некоторых пользователей?

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

Answer 2

Проще всего проверить поле файла, когда пользователь действительно отправляет форму ... таким образом вам не придется искать изменения формы.

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

Этот код Unobtrusive JavaScript и не испортит форму, если пользователь не поддерживает JS.

Answer 3

код Дэвид Томас может быть установлен на кнопку 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>