input type file OnChange not able to get filename in jquery?

Question

I am trying to get file name from input type='file' OnChange and after that. it is if giving length equal to 1. But val() is empty. How get file name here?

<span class="btn btn-primary fileinput-button">
   <i class="glyphicon glyphicon-plus"></i>
   <span>@(i18n_Models_Image.AddImages + "...")</span>
   <input id="fileupload" type="file" name="files[]" accept="image/*">    
</span>

$('#fileupload').on('change', function(e) {
   console.log("hi");
   console.log($('#fileupload').val()); // is empty
});

I guess this might be helpful - http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Ilya Luzyanin, Aug 08 '14 at 16:46
works fine for me in chrome. http://jsfiddle.net/08828cyy/ Do you have multiple inputs with the same id? — epascarello, Aug 08 '14 at 16:46
Is your code enclosed in `$(document).ready(function () { ... });` ? — Slippery Pete, Aug 08 '14 at 16:48

score 1 · Answer 1 · answered Aug 08 '14 at 17:08

Check if you have included the jquery file which supports the .on(). (i.e jQuery 1.7 or greater)

And ensure that you have added your code into the document.ready or window.load.

$(document).ready(function() {
   $('#fileupload').on('change', function(e) {
      console.log("hi");
      console.log($('#fileupload').val()); // is empty
   });
});

To get file name try the following:

var filename = $('#fileupload').val().split('\\').pop();

Or

var filename = $('#fileupload').val().replace(/C:\\fakepath\\/i, '');

Working fiddle is here

input type file OnChange not able to get filename in jquery?

1 Answers1