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

Question

Following up on this post, I have another issuer - how can I trigger the browse file in the input when I click on a text link?

Basically I want to hide the form but it will be triggered when you click on the upload text link.

<a href="#" class="upload">upload</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;">
  <input type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

This is my working Javascript code:

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

    $('input[type=file]').change(function() {
        $('#myForm').ajaxSubmit({
               target: '#output'
        });
    });
});

possible duplicate of Emulate a file upload click in jQuery

BradleyDotNET
– BradleyDotNET

2015-03-06 23:24:30 +00:00
Commented Mar 6, 2015 at 23:24 — BradleyDotNET
– BradleyDotNET, Commented Mar 6, 2015 at 23:24

Joe · Accepted Answer · 2013-04-10 17:26:17Z

18

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.

edited Apr 10, 2013 at 17:26

answered Aug 20, 2011 at 15:16

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prakash Raman Over a year ago

The javascript worked for me to. But could you tell me why it worked and just a simple $("input[type=file]").click() wont ?

Prakash Raman Over a year ago

Thanks, although in my case the form element is visible. Still am unable to attach the direct "click" to it.

link0047 · Accepted Answer · 2015-10-08 14:22:39Z

3

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>

answered Oct 8, 2015 at 14:22

link0047

1037 bronze badges

Comments

Neal · Accepted Answer · 2012-06-25 21:50:16Z

2

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

answered Jun 25, 2012 at 21:50

Neal

4,58839 silver badges34 bronze badges

1 Comment

newshorts Over a year ago

Have you found a solution yet? I have a similar issue and need to find something that works across browsers.

Bruno Henrique · Accepted Answer · 2019-01-03 20:51:21Z

0

<button>
  <label>
    select file
    <input type="file" style="visibility: hidden" file-handler>
  </label>
</button>

This should help you

edited Jan 3, 2019 at 20:51

Bruno Henrique

111 bronze badge

answered Jan 3, 2019 at 19:42

Omkar Frozen

6229 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related