Custom input button show selected file

Question

By default,

<input type="file">

shows a button and text that says "no file chosen" and then shows the selected file. I am showing a custom button and thus had to hide the standard button with opacity 0.

How can I show "No file chosen" and show the selected file as well if using a custom button?

You can't customize file uploads. However, there are other ways around it. — Blazemonger, May 29 '13 at 14:37
possible duplicate of [How to customize ?](http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file) — Blazemonger, May 29 '13 at 14:37

score 2 · Accepted Answer · answered May 29 '13 at 14:54

you can do something like this TO SHOW THE SELECTED FILE:

$(document).ready(function(){    
    $("#file").change(function(){
        getFileName($(this).attr("id"));
    });
});

getFileName = function(id){
    var str = '';
    var files = document.getElementById(id).files;
    for (var i = 0; i < files.length; i++){
        str += files[i].name;
    }
    $("#file-name").text(str);
}

DEMO: http://jsfiddle.net/W2y8D/

Custom input button show selected file

1 Answers1