Как отключить кнопку отправки, пока файл не выбран - PullRequest
Новая
       21

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

2 голосов
/ 12 декабря 2010

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

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

Ответы [ 3 ]

5 голосов
/ 12 декабря 2010

Этот 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 .

5 голосов
/ 12 декабря 2010

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

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

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

0 голосов
/ 13 сентября 2014

Код Дэвида Томаса можно установить для идентификатора кнопки: 

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