jquery trigger: how can I trigger the browse file in the input when I click on a text link?

You can't use style="display:none;" use style="visibility:hidden;"

and I changed trigger to click:

$('.upload').click(function(){
    $('input[type=file]').click();
    return false;
});


Reasoning:

The input fields will not be sent to the server with display:none, but will be with visibility:hidden.


why don't you use a label instead? then you could use the for attribute.

<style type="text/css">
  #file_upload {
    visibility: hidden;
  }
</style>
<a href="#" class="upload">
  <label for="file_upload">upload</label
</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
  <input id="file_upload" type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

Joe's method is correct. However, this solution will only work in some browsers. It works on Chrome and Firefox but not on Opera, Safari, or the Android Galaxy S built-in browser (tested on current versions as of June 23, 2012). Those browsers likely disable triggering the upload button via JS for security reasons.

I will update this post if I find a solution that works in all modern browsers