CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How can I display the file name with file upload

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?

Upvotes: 4

Views: 8270

Answers (2)

palaѕн
palaѕн

Reputation: 73966

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

Upvotes: 4

Johan
Johan

Reputation: 35223

If you just need the filename:

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

Upvotes: 5

Related Questions