Question

So I have my upload script working just fine, but now it’s a matter of making it look the way I want for my layout.

<input type="file" name="userfile" id="userfile"/>

This obviously shows a textbox with a Choose File button. What I really need is my own custom button (which will ultimately be an image) that upon successful file select (not upload quite yet) triggers a jQuery event to show a div. I do NOT want the filename textbox to show.

Basic steps outlined below.

1. User clicks on image button to upload their file
2. User selects file
3. jQuery shows a div with more fields
4. User clicks submit and file is uploaded

Answer 1

File upload elements are notoriously difficult to access for security reasons. I think the best you can do is attach a handler to the change event of the file upload that displays the div if the file field’s value is different from null.

A custom button is out of the question. To get that, you would have to resort to a file upload alternative like Flash-based SWFUpload.