How can I display the file name with file upload

Question

I want to show the file name while uploading the file.For that i used the hidden field. My code is

<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />

javascript is

$("input[type='image']").click(function() {
    $("input[id='my_file']").click();
});

How can I do this?

Answer 1

If you just need the filename:

$('#my_file').change(function(){
    var filename = $(this).val().split('\\').pop();
});

Answer 2

You can do this:

$("input[type='image']").click(function () {
    $("input[id='my_file']").click();
});

$("input[id='my_file']").change(function (e) {
    var $this = $(this);
    $this.next().html($this.val().split('\\').pop());
});

FIDDLE