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


But it doesn't seem to work. Please help. Thank you.

Solution 1

This is due to a security restriction.

I found out that the security restriction is only when the <input type="file"/> is set to display:none; or is visbilty:hidden.

So i tried positioning it outside the viewport by setting position:absolute and top:-100px; and voilà it works.


call it a hack.

Hope that works for you.

Solution 2

this worked for me:




<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>


.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;

>>>Another one that works Cross-Browser:<<<

The Idea is that you overlay an invisible huge "Browse" button over your custom button. So when the user clicks your custom button, he's actually clicking on the "Browse" button of the native input field.

JS Fiddle:


<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!


div#mybutton {

  overflow: hidden;
  position: relative;   

  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;

div#mybutton:hover {
  background: green;

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */


$(document).ready(function() {
    $('#myfile').change(function(evt) {

Solution 3

You can use LABEL element ex.

    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//

This will trigger the input file

Solution 4

I have it working (=tested) in IE8+, recent FF and chrome:


The key is focusing before firing the click (otherwise chrome ignores it).

Note: you do NEED to have your input displayed and visible (as in, not display:none and not visibility:hidden). I suggest (as many other have before) to absolutely position the input and throw it off screen.

#uploadInput {
    position: absolute;
    left: -9999px;

Solution 5

Check out my fiddle.

.uploadFile {
  visibility: hidden;

#uploadIcon {
  cursor: pointer;
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src=""  width="20px" height="20px"/>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />

Solution 6

Just for the sake of curiosity, you can do something like you want by dynamically creating an upload form and input file, without adding it to the DOM tree:

$('.your-button').on('click', function() {
    let uploadForm = document.createElement('form');
    let fileInput = uploadForm.appendChild(document.createElement('input'));
    fileInput.type = 'file'; = 'images';
    fileInput.multiple = true;;

No need to add the uploadForm to the DOM.

Solution 7

adardesign nailed it regarding the file input element being ignored when it is hidden. I also noticed many people shifting element size to 0, or pushing it out of bounds with positioning and overflow adjustments. These are all great ideas.
An alternative way that also seems to work perfectly well is to just set the opacity to 0. Then you can always just set the position to keep it from offsetting other elements as hide does. It just seems a little unnecessary to shift an element nearly 10K pixels in any direction.

Here's a little example for those who want one:

    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    /* For IE5 - 7 */
    filter: alpha(opacity=0);

Solution 8

Actually, I found out a really easy method for this, which is:


This way, your file input field can have the css property display on none and still win the trade :)

Solution 9

Correct code:

    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    .upload input[type='submit']{
        display: none;
        width: 100px; height: 30px
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />

<script type="text/javascript">
    function open() {
    function upload() {

Solution 10

That's on purpose and by design. It's a security issue.

Solution 11

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

Solution 12

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


.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;


bootstrap file input buttons demo

Solution 13

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.    ;-)  ;-)

Solution 14

or else simply


Solution 15

You can click the input file from your JQuery while keeping it hidden fully.

I am using this:

< input type="file" name="article_input_file" id="article_input_file" accept=".xlsx,.xls" style="display: none" >


this works from within any standard script tag in your HTML page.

Solution 16

i had problems with custom client side validation for <input type="file"/> while using a fake button to trigger it and @Guillaume Bodi's solution worked for me (also with opacity: 0; on chrome)

$("#MyForm").on("click", "#fake-button", function () {

and css style for upload input

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;

Solution 17

Try this, it's a hack. the Position:absolute is for Chrome and trigger('change') is for IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");

$('#aPhotoUpload').click(function () {
    if ($.browser.msie)

hiddenFile.change(function (e) {

Solution 18

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.

Solution 19

This is probably the best answer, keeping in mind the cross browser issues.


#file {
  opacity: 0;
  width: 1px;
  height: 1px;




<a class="file-upload">Upload</a>
<input type="file" name="file">

Solution 20

I think i understand your problem, because i have a similar. So the tag <label> have the atribute for, you can use this atribute to link your input with type="file". But if you don't want to activate this using this label because some rule of your layout, you can do like this.

  var reference = $(document).find("#main");
     formenctype: 'multipart/form-data'
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/

  /*button style*/
<script src=""></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>

<button class="btn js-btn-upload">click me</button>

Of course you will adapt this for your own purpose and layout, but that's the more easily way i know to make it work!!

Solution 21

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();

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