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

Question

This is the uploaded form.

<form class="alert alert-info">     <div>         <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b>         <input class="span3" type="file" name="image_file" id="image_file" style="display:none " />         <input disabled="true" type="button" value="Upload image" class="btn" />     </div> </form> 

I use the following script to open a window with files. I want to show a file name in <b id = 'select_file'>.

How can I do this?

$('#select_file').click(function(){     var _this = $(this);     $('#image_file').show().focus().click().hide();      var filename = $('#image_file').val();     _this.html(filename);      $('.btn').attr('disabled', false); }); 

Answer 1

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

Answer 2

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);     }); });​