Here I have created smaple that will help you out.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#img1").click(function () {
$("#my_file").click();
});
$("#my_file").change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '')
$('#spanImageName').html(file_name);
$('filePath').val($(this).val());
});
});
</script>
</head>
<body>
<input type="image" id="img1" width="100px" src="https://i.imgur.com/73e8Dja.png" hiegth="100px" />
<input type="file" id="my_file" style="display: none;" />
<input type="hidden" id="filePath" />
<span id="spanImageName"></span>
</body>
</html>
Demo