javascript - Display file name from input type file - console.log(fileName) return null -

i'm trying display file name input type file.

this code:

<input id="id_file_field" name="file_field" type="file" style="display:none" /> 

here jquery:

$(document).ready(function () {     $("#upload_file").click(function () {         $("#id_file_field").trigger('click');         var path = $("#id_file_field").val();         var filename = path.match(/[^\/\\]+$/);         console.log(filename);     }); }); 

why console.log(filename) return null?

you need wait change event

$(document).ready(function () {     $("#upload_file").click(function () {         $("#id_file_field").trigger('click');     });     $('#id_file_field').change(function () {         var value = this.value;         var filename = typeof value == 'string' ? value.match(/[^\/\\]+$/)[0] : value[0]         console.log(filename);     }) }); 

demo: fiddle