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

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

Вот что у меня есть сейчас:

<script type="text/javascript">
function submitonce(theform) {
    //if IE 4+ or NS 6+
    if (document.all || document.getElementById) {
        //screen thru every element in the form, and hunt down "submit" and "reset"
        for (i = 0; i < theform.length; i++) {
            var tempobj = theform.elements[i]
            if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
            //disable em
            tempobj.disabled = true
        }
    }
}
</script>
<form name="form" enctype="multipart/form-data" method="post" action="upload.php" onSubmit="submitonce(this)">
 <input type="file" name="my_field" value="" />
 <input type="submit">
</form>

jquery file-upload webforms
person santa    schedule 29.10.2010    source источник

Ответы (5)


arrow_upward
50
arrow_downward

Следующее, похоже, надежно работает в Chrome и Firefox (Ubuntu 10.10), в данный момент я не могу проверить на других платформах:

jQuery

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);
                    // or, as has been pointed out elsewhere:
                    // $('input:submit').removeAttr('disabled'); 
                } 
            }
            );
    });

HTML

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

Демо на JS Fiddle.

person David says reinstate Monica    schedule 29.10.2010
comment
Спасибо, мне нравится простота этого решения. Как его можно изменить, чтобы снова отключить кнопку отправки после отправки формы? - person santa; 30.10.2010
comment
Хорошо понял. Я добавил следующую функцию: $(#uploadForm).submit(function(){ $(input[type=submit], this).attr(disabled, disabled); }); - person santa; 30.10.2010
comment
Я считаю, что было бы лучше, если бы вы написали условие следующим образом: $('.upload-pm-btn').attr('disabled', !$(this).val()); Таким образом, когда вы позже удалите значение из загрузки файла, кнопка снова станет неактивной. - person Santhos; 25.02.2014
comment
Ошибка: если вы отмените выбор файлов, кнопка останется активной! - person Pathros; 21.02.2018

arrow_upward
19
arrow_downward

Немного более простой способ использования prop(), который я считаю предпочтительным способом сделать это сейчас:

$('input:file').on("change", function() {
    $('input:submit').prop('disabled', !$(this).val()); 
});

Протестировано в IE, Chrome и FireFox.

person matt burns    schedule 13.08.2013
comment
Это отлично работает, так как он получает кнопку disabled, если кто-то отменяет выбор файла (ов) - person Pathros; 21.02.2018
comment
Это выглядит (на мой, по общему признанию, jQuery-оспариваемый глаз), как будто это отключит все кнопки отправки в данной форме, которая имеет пустой элемент управления загрузкой файла? Хорошо в примере OP, но, возможно, стоит упомянуть, что необходимо, если есть несколько отправок или несколько элементов управления загрузкой файлов? - person DJDave; 03.07.2018

arrow_upward
4
arrow_downward

Пытаться

   $('#my_uploader').change(function() {
      if($(this).val()) {
        $('#my_submit_button').attr('disabled', '');
      } else {
        $('#my_submit_button').attr('disabled', 'disabled');
      }
    });
person Aaron Hathaway    schedule 29.10.2010
comment
Атрибут disabled, по сути, является логическим значением; Я бы рекомендовал использовать .attr('disabled',true') / .attr('disabled',false). - person David says reinstate Monica; 30.10.2010
comment
вы должны использовать .removeAttr (отключено) - person hunter; 30.10.2010
comment
Это такой очевидный момент, @hunter, мне стыдно, что это никогда не приходило мне в голову до того, как ты указал (искренне, я не (к моему стыду) шучу)... = / +1 - person David says reinstate Monica; 30.10.2010
comment
В HTML логические атрибуты, такие как disabled и readonly, могут легально принимать только имя атрибута. например. disabled=disabled readonly=readonly Однако большинство браузеров принимают любое значение атрибута как аффимативное. Таким образом, следующие эквиваленты: disabled=disabled disabled disabled=true disabled=no w3.org/TR/REC-html40/intro/ - person pinkfloydx33; 30.10.2010

arrow_upward
1
arrow_downward

Если вы поклонник троичных выражений:

$(document).ready(function(){
    var $submit = $('#submit_document');
    var $file = $('#file_path');

    $file.change(
        function(){
            $submit.attr('disabled',($(this).val() ? false : true));
        }
    );
});
person JayJay    schedule 29.11.2016

arrow_upward
1
arrow_downward

Вместо того, чтобы отключать отправку, может быть более полезно предложить инструкцию, если пользователь нажимает ее, не выбирая сначала файл? Итак, добавьте что-то подобное в качестве кода onclick для отправки?

var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;

Обратите внимание, что вашему файловому элементу управления потребуется идентификатор, а также имя.

person DJDave    schedule 04.07.2018