Javascript code working in IE but not working in Firefox?

I have this code :

<a href="javascript:document.forms['form1'].student_pic.click()">
    <img src="images/mypic.png" alt="" width="161" height="29" border="0" style="margin-top:10px" />
</a>
<input style="display:none" type="file" name="student_pic" id="student_pic" />

This code is working successfully in IE but it's not working in FF.

off course there is form on my page called form1

When the user click the image, select file window will let the u开发者_如何学运维ser select image and put it in hidden file element.

What is the proplem?

Thanks

Your problem is simply that .click() to open the file chooser dialog does not work on all browsers. I'm not aware of any workaround.

Common way around is have the file input in place but with opacity of 0 which actually means it's hidden, and over it place your custom image or text. Make sure the "browse" button is exactly where your text/image is and it will work - clicking the custom text/image will actually click the browse buttton.

I have such code somewhere so if you won't be able to achieve this I'll search for that code.

Not supported in Gecko yet:

Gecko 2.0 note(Firefox 4) 

Starting in Gecko 2.0 , calling the click() method on an <input> element of 
type file opens the file picker and lets the user select files.

from https://developer.mozilla.org/en/HTML/Element/input#File_inputs