Get filename from input [type='file'] using jQuery

There is no jQuery function for this. You have to access the DOM element and check the files property.

document.getElementById("image_file").files[0];

Or

$('#image_file')[0].files[0]

You have to do this on the change event of the input type file this way:

$('#select_file').click(function() {
    $('#image_file').show();
    $('.btn').prop('disabled', false);
    $('#image_file').change(function() {
        var filename = $('#image_file').val();
        $('#select_file').html(filename);
    });
});​

Getting the file name is fairly easy. As matsko points out, you cannot get the full file path on the user's computer for security reasons.

var file = $('#image_file')[0].files[0]
if (file){
  console.log(file.name);
}