views:

1154

answers:

3

I've got a web page that looks like this

<html>
    <head>
     <title>File Upload Click Test</title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    </head>
    <body>
     <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
     <input type="file"></input>
    </body>
</html>

My goal is to have the div raise a click event on the file input, and this seems to work exactly as I'd expect in IE and Chrome, but doesn't work in Firefox (no file browser is opened when you click on the div).

Is there a way to get this working in FF?

+3  A: 

This is prohibited due to security reasons. You really need to have your pointer on the input type="file" field.

If you're actually interested in styling the input type="file" field, you may find this article useful.

At least you're not the only one.

BalusC
+4  A: 

Is there a way to get this working in FF?

No, and it doesn't work in most common versions of IE, either. IE will open the dialog, but once you've selected a file with it the form won't actually submit.

Abandon hope. The only way to fake a file upload box is using the transparency technique, and that's really not recommended at all as browsers may lay out file upload boxes differently internally (or even provide a file upload control that doesn't include a Browse dialogue), making it highly likely you'll end up with an inoperable form.

Learn to love the grey file upload field, or use progressive enhancement to replace it with Flash where available.

bobince
Abandon hope. Check.
kristian
aaaawwwwwwwwwwwwwwwwwwwwwwww :(
Arnis L.
A: 

I had faced with this problem once before. But i found out that click() exists in only IE. So IE can able to understand it and obey. But if you found some nice idea about it let us know.

T-joe