Question

I’ve been struggling with this all morning, it’s time to ask for help.

To reclaim screen space and tidy-up the UI, I must replace the old-school HTML:

<input type="file" name="upload">
<input type="button" value="Submit">

with something that occupies less space on the page, like:

<p id="picfile">Choose your file</p>
<input type="hidden" name="userfile">

The idea is that a script (JQuery?) will pick up on the click event, facilitate the user choosing a file, and manage uploading that file to the webserver.

Would some kind soul please point me in the right direction, or at least suggest a better search string than “file” or “file chooser” or “jquery choose file”… If only there was a highly-searchable, technical name for this activity.

I found a jQuery plugin that claims to do this, but documentation isn’t the best. I was unable even to take their working example and duplicate it. http://www.daimi.au.dk/~u061768/file-input.html

Thanks.

Answer 1

use “custom file input jquery” and you will find a lot,
for example:

• http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

• http://archive.plugins.jquery.com/project/custom-file

• http://www.quirksmode.org/dom/inputfile.html