How to Use Jquery to Detect If a File Input Has a File Selected

How do I use JQuery to detect if a file input has a file selected?

This should suffice:

alert($('#your_input_box').val());

A file selection box is just an input box, from what I can tell. Read more from this question: jQuery: get the file name selected from <input type="file" />.

How to check if input file is empty in jQuery

Just check the length of files property, which is a FileList object contained on the input element

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}

Checking if an input file has been selected?

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>

jQuery - Detecting if a file has been selected in the file input

You should be able to attach an event handler to the onchange event of the input and have that call a function to set the text in your span.

<script type="text/javascript">
  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       $(".filename").html(fileName);
     });
  });
</script>

You may want to add IDs to your input and span so you can select based on those to be specific to the elements you are concerned with and not other file inputs or spans in the DOM.

How to detect when a file is uploaded to an input element of type file?

As a file input will start off with no files selected, and no files can be selected without user-interaction, I'd suggest using the change() method (using the change event):

$('input:file').change(
    function(e){
        console.log('file "' + path.split('\\').pop(); + '" selected.');
    });

References:

:file selector.
Use jQuery to get the file input's selected filename without the path

check if a file is loaded to input type=file

You can check the files property of the element, not the jQuery object:

var files = $("#document-file")[0].files;

Jquery / Javascript check if input file is got files or not

If you start off with a jQuery object e.g. var $input = $(selector), you need to use its native HTML element using $input[0] to access its properties which contains a files array.

Below is a quick example:

$(function() {  var $input = $('[name=file]');  $('button').click(function() {    alert($input[0].files.length ? 'files were selected' : 'no files were selected');  })});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="file" name="file" multiple><br><br><button>Check</button>

How to check if one of the file input types has value?

Use .filter() to findout input element with a value, and check the length

$('#upload-button').live('click', function () {
    var has_selected_file = $('input[type=file]').filter(function(){
        return $.trim(this.value) != ''
    }).length  > 0 ;

    if (has_selected_file) {
        /* do something here */
    }
});