Проверка, был ли выбран входной файл?

Question

В настоящее время я работаю над сайтом, где вы можете загрузить файл:

<input type="file" name="file" id="file" class="form-control" />

Затем у меня есть кнопка, которую вы можете нажать, чтобы загрузить выбранный файл:

<button class="btn btn-primary" type="submit">Upload CV</button>

Здесь я хотел бы, чтобы кнопка была кликабельной ТОЛЬКО , если файл был выбран. Возможно ли это с помощью JS и как?

Заранее спасибо!

javascript html asp.net-mvc

2

Ankerstjerne 18 Дек 2015 в 17:08

Answer 1

Вы можете использовать JQuery, как сказал FullOfQuestions, но было бы также хорошо проверить, что файл был выбран перед выполнением кода кнопки!

<input type="file" name="file" id="myFile"/>

<!--Add disabled attribute to the button so that is appears disabled at page load-->
<button id="myBtn" type="submit" disabled>Upload CV</button>

<script type="text/javascript">
        $(function () {

            //when input's value changes
            $("#myFile").change(function () {
                if($(this).val())
                {
                    $("#myBtn").prop("disabled", false);
                }
                else
                {
                    $("#myBtn").prop("disabled", true);
                }
            });

            //when button is clicked
            $("#myBtn").click(function () {
                if($("#myFile").val())
                {
                    console.log("file selected");
                }
            });
        });

</script>

0

joalcego 18 Дек 2015 в 14:30

Answer 2

Вы можете сделать это с родным JS ниже. Кнопка активируется, когда файл выбран, но если файл не был выбран, кнопка отключается.

var button = document.querySelector('button[type=submit]');

button.disabled = true;

document.getElementById('file').addEventListener('change', function () {
  if (this.value.length > 0) {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
});

<input type="file" name="file" id="file" class="form-control" />

<button class="btn btn-primary" type="submit">Upload CV</button>

0

boombox 18 Дек 2015 в 14:19

Answer 3

Используя 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'); 
            } 
        }
        );
});

Добавить отключенный атрибут в теге кнопки.

2

Aman Gupta 18 Дек 2015 в 14:14

Проверка, был ли выбран входной файл?

3 ответа

Похожие вопросы

Новые вопросы

javascript