How to handle input type=file with jQuery click event on another element

I've this code

<div id="main">
    <div id="u-button">Upload Photo</div>
    <form id="u_form" action开发者_如何学Python="upload.php" method="post" 
    enctype="multipart/form-data" target="upload_t">
       <input id="upload" type="file" name="img" class="multi"/>
       <iframe id="upload_t" class="hide" name="upload_t" src=""></iframe>
    </form>
</div>

The div#main is set to height and width similar to div#u-button and set overflow to hidden. The idea is to hide the form. I do not want the default file upload input element's style so what I'm trying to do is, on clicking on div#u-button, I want it to fire the click event on input#upload.

My jQuery codes is like

$('#u-button').live('click', function(){ $("#upload").click(); });

This seem to work with some browsers (newer versions of all browsers) but in some older browsers, it doesn't work.

Can anyone help me tweak the codes to make it work on more browser versions?

If you want to fire an event of an element use the jQuery command trigger().

http://api.jquery.com/trigger/

You probably tried to hide the input#upload as display=none or visbilty:hidden. This would break the click event in older browser for security reason.

Try to make #upload not hidden. You can make your u-button higher z-index, and position:absolute, so the div can cover #unload.

Or make your unload button position:absolute, and push it off the screen with top: -10000px.