I'm using an Upload Script, and I've been working on trying to style the 'Choose File Button' (input file button) which was a challenge to be styled for multiple browsers, but finally works with Google, IE and FF. However, now that I've successfully styled the input file button, when a file is now chosen, the chosen file name no longer appears, prior to Submit. I've attached an image of the code changes I made, plus some CSS styling, and this addition: label input[type="file"] { position: fixed; top: -1000px; Code (markup): Any suggestions/ideas/remedy on how to get the chosen file to show (or something to show an action has taken place - like a message tha says "File Selected" possibly) will be appreciated
You're doing it wrong... sorta. Here's an example on how you can do it - it will also work just fine if js isn't available. http://jsfiddle.net/xMD3S/3/
Thanks for your reply. I don't know how to integrate it into the code I currently have, but I gave it a try and this is what it looks like - see attached image Any additional help will be appreciated
Well, the javascript in the jsfiddle is based on jQuery - if you're not running jQuery on your site, it won't work. Apart from that, the CSS is of course possible to modify, and the JS and CSS is based on the IDs and classes on the inputs themselves, and shouldn't interfere with anything else. Since the actual file input isn't hidden, I'm betting that you don't run jQuery, or have placed the javascript code outside the document.ready()-function.
Thanks for all of the replies. At this point then, maybe someone can simply help me do one of the following: - Get the value of the file selected and just add that to a div next to the styled input file button. - Capture the file name from the DOM once the file is selected and then write it to a another HTML element located at the same spot - Have a simple a message appear, once a file is selected that says "File Selected" just so the uploader knows that an action has taken place, prior to submit. Any help with one of these, or another suggestion, will be welcomed. Much thanks again