jQuery trigger file input

Question

Am trying to trigger an upload box (browse button) using jQuery.
The method I have tried now is:

$(\'#fileinput\').trigger(\'click\');   

Answer 1

It is too late to answer but I think this minimal setup work best. I am also looking for the same.

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

//css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

bootstrap file input buttons demo

Answer 2

Based on Guillaume Bodi's answer I did this:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

which means it's hidden to start with and then displayed for the trigger, then hidden again immediately.

Answer 3

or else simply

$(':input[type="file"]').show().click().hide();

Answer 4

This is a very old question, but unfortunately this issue is still relevant and requires a solution.

The (suprisingly simple) solution I've come up with is to "hide" the actual file input field and wrap it with a LABEL tag (can be based on Bootstrap and HTML5, for enhancement).

See here:Example code here

This way, the real file input field is invisible and all you see is the customized "button" which is actually a modified LABEL element. When you click on this LABEL element, the window for selecting a file comes up and the file you choose will go into the real file input field.

On top of that, you can manipulate the look and behaviour as you wish (for example: get the name of the selected file from the file input file, after selected, and show it somewhere. The LABEL element doesn't do that automatically, of course. I usually just put it inside the LABEL, as its text content).

Beware though! The manipulation of the look and behaviour of this is limited to whatever you can imagine and think of.    ;-)  ;-)

Answer 5

I managed with a simple $(...).click(); with JQuery 1.6.1

Answer 6

My problem was a little bit different on iOS 7. Turns out FastClick was causing problems. All I had to do was add class="needsclick" to my button.