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