Customize Upload Feature working but not showing File Name

I’m trying to customize my file upload feature. The code works fine, but does not show the file upload’s name.

I’ve tried to use JavaScript to display the name in the ‘span’ tag but it isn’t working.

Could you help me spot the problem with the code below.

Thanks in advance!

<script>

$('#getFile').change(function(){
$('#fileName').text($('#getFile')[0].files[0].name);
});

</script>
 
<span id="fileName">No file selected</span></font>
<input type="file" name="file" id="getFile" style="display: none">
<a style="text-decoration: none;" onclick="document.getElementById('getFile').click()">
Browse File ...
</a>