PHP File Upload + jQuery

Question

Hello Everyone,

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.

Answer 2

There is a solution for this using jQuery here. It enables you to use an image for the upload button, and with a little customization I believe you could get it to do what you're looking for.

Answer 3

The few solutions to this that I've seen actually hide the upload input field and then display their own custom button. As the mouse moves over this custom button they use a script to reposition the input element beneath the cursor. Quite a lot of work.