Question

I’m trying to style my file input, so i ended up having an extra button with some styling, which i will call the “fake browse” button. When a user clicks on the “fake browse”, my javascript will automatically click (with jquery .click()) the “actual browse” button for the file input.

It seems to work, since the actual path of the file is pasted on the input file.
When submitting the form, IE automatically clears the file input and the file itself doesn’t get uploaded. However, When i click on the “actual browse” button, IE doesn’t clear the input file.

But i really dont understand this because when a user click the “fake browse” button, there is an event handler than clicks the “actual browse” button. Help???

Here is what i mean
http://jsfiddle.net/GJJym/

The reason why i had an iframe was that i was trying to make this an ajaxy image uploading process.

Note: This works for FF, chrome, and safari, BUT NOT IE. What the heck!!!

Answer 1

I’m not really sure why IE isn’t behaving here; but if all you’re trying to do is restyle the file input control, I suggest you read this article – essentially you set put a custom styled upload button or text under the file input and set the file input’s opacity to 0. The user thinks he’s clicking the custom styled upload button; but he’s really clicking the file input. 😉