javascript - Checking if an input file has been selected? - Stack Overflow

admin管理员组

文章数量:1389840

I am currently working on a website, where you are able to upload a file:

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

I then have a button which you can press to upload the selected file:

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

Here I would like the button to be clickable ONLY if a file has been selected. Is this possible using JS, and how?

Thanks in advance!

I am currently working on a website, where you are able to upload a file:

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

I then have a button which you can press to upload the selected file:

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

Here I would like the button to be clickable ONLY if a file has been selected. Is this possible using JS, and how?

Thanks in advance!

• javascript
• html
• asp-mvc

Share Improve this question Follow edited Dec 18, 2015 at 14:24 JRulle 7,56866 gold badges4242 silver badges6363 bronze badges asked Dec 18, 2015 at 14:08 AnkerstjerneAnkerstjerne 12211 gold badge22 silver badges1010 bronze badges 2

• I am pretty new to JS, but I thought maybe it was possible to check, when the button is pressed, if a file was selected - but that's not quite what I am looking to achieve. I haven't tried anything yet since I am quite lost on how to do it. – Ankerstjerne Commented Dec 18, 2015 at 14:13
• Look at HTML5 Form Validation. Built in... – epascarello Commented Dec 18, 2015 at 14:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use JQuery as FullOfQuestions said, but it would be also good to verify that the file was selected before executing button code!

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

Using 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'); 
            } 
        }
        );
});

Add disabled attribute in button tag.

You can do this with native JS below. The button is enabled when a file has been selected, but if a file has not been selected, the button is disabled.

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>

本文标签： javascriptChecking if an input file has been selectedStack Overflow