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         But it doesn t seem to work   Please help  Thank you

User · Answer

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 () {
        $("#uploadInput").focus().trigger("click");
    });

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

User · Answer

Actually  I found out a really easy method for this  which is       fileinput   show   trigger  click   hide         This way  your file input field can have the css property display on none and still win the trade

User · Answer

You can click the input file from your JQuery while keeping it hidden fully  I am using this   lt  input type  quot file quot  name  quot article input file quot  id  quot article input file quot  accept  quot  xlsx  xls quot  style  quot display  none quot   gt      quot  article input file quot   click     this works from within any standard script tag in your HTML page

User · Answer

I think i understand your problem  because i have a similar  So the tag  lt label gt  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    x000D   x000D    document  ready function    x000D    var reference     document  find   main    x000D    reference find   js-btn-upload   attr   x000D       formenctype   multipart form-data  x000D        x000D     x000D    reference find   js-btn-upload   click function    x000D      reference find  label   trigger  click    x000D        x000D     x000D      x000D   hide  x000D    overflow  hidden  x000D    visibility  hidden  x000D      Style for hide the elements  don t put the element  out  of the screen   x000D    x000D   x000D   btn  x000D      button style   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 0 0 jquery min js  gt  lt  script gt  x000D   lt div id  main  gt  x000D   lt form enctype multipart formdata  id  form-id  class  hide  method  post  action  your-action  gt  x000D     lt label for  input-id  class  hide  gt  lt  label gt  x000D     lt input type  file  id  input-id  class  hide   gt  x000D   lt  form gt  x000D   x000D   lt button class  btn js-btn-upload  gt click me lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

This is probably the best answer  keeping in mind the cross browser issues   CSS    file     opacity  0    width  1px    height  1px      JS       file-upload   on  click  function           name  file     click          HTML    lt a class  file-upload  gt Upload lt  a gt   lt input type  file  name  file  gt

User · Answer

or else simply      input type  file     show   click   hide

User · Answer

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

User · Answer

Try this  it s a hack  the Position absolute is for Chrome and trigger  change   is for IE   var hiddenFile       lt input type   file   name   file   id   file1   style   position absolute left -9999px     gt        body   append hiddenFile        aPhotoUpload   click function          hiddenFile trigger  click        if    browser msie          hiddenFile trigger  change         hiddenFile change function  e        alert  TODO

User · Answer

I have it working   tested  in IE8   recent FF and chrome       uploadInput   focus   trigger  click      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

User · Answer

It is too late to answer but I think this minimal setup work best  I am also looking for the same      lt div class  btn-file  gt        lt input type  file  class  hidden-input  gt       Select your new picture    lt  div gt      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

User · Answer

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  nbsp  nbsp  nbsp   -  nbsp   -

User · Answer

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   input type  file        position absolute      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

User · Answer

this worked for me   JS       fileinput   trigger  click       HTML    lt div class  hiddenfile  gt     lt input name  upload  type  file  id  fileinput   gt   lt  div gt    CSS    hiddenfile    width  0px   height  0px   overflow  hidden           Another one that works Cross-Browser  lt  lt  lt   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  http   jsfiddle net 5Rh7b   HTML    lt div id  mybutton  gt     lt input type  file  id  myfile  name  upload   gt    Click Me   lt  div gt    CSS   div mybutton         IMPORTANT STUFF      overflow  hidden    position  relative           SOME STYLING      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        JavaScript     document  ready function             myfile   change function evt            alert   this  val

User · Answer

Based on Guillaume Bodi s answer I did this       fileinputbar-button   on  click   function            article project files  gt  header  article upload   show           article project files  gt  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

User · Answer

Check out my fiddle   http   jsfiddle net mohany2712 vaw8k    x000D   x000D   uploadFile   x000D    visibility  hidden  x000D    x000D   x000D   uploadIcon   x000D    cursor  pointer  x000D    x000D   lt body gt  x000D     lt div class  uploadBox  gt  x000D       lt label for  uploadFile  id  uploadIcon  gt  x000D         lt img src  http   upload wikimedia org wikipedia commons thumb 3 34 Icon - upload photo 2 svg 512px-Icon - upload photo 2 svg png   width  20px  height  20px   gt  x000D       lt  label gt  x000D       lt input type  file  value  upload  id  uploadFile  class  uploadFile    gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

This is due to a security restriction   I found out that the security restriction is only when the  lt input type  file   gt  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   see http   jsfiddle net DSARd 1   call it a hack   Hope that works for you

User · Answer

I managed with a simple        click    with JQuery 1 6 1

User · Answer

Correct code    lt style gt       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             upload          width  100px  height  30px        lt  style gt   lt div class  upload  gt       lt input type  file  ID  flArquivo  onchange  upload       gt       lt input type  button  value  Selecionar  onchange  open       gt       lt input type  submit  ID  btnEnviarImagem     gt   lt  div gt    lt script type  text javascript  gt      function open                 flArquivo   click              function upload                 btnEnviarImagem   click           lt  script gt

User · Answer

You can use LABEL element ex    x000D   x000D   lt div gt  x000D       lt label for  browse  gt Click Me lt  label gt  x000D       lt input type  file  id  browse  name  browse  style  display  none  gt    x000D   lt  div gt  x000D   x000D   x000D    This will trigger the input file

User · Answer

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

User · Answer

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         var uploadForm   document createElement  form        var fileInput   uploadForm appendChild document createElement  input          fileInput type    file       fileInput name    images       fileInput multiple   true       fileInput click          No need to add the uploadForm to the DOM

[javascript] jQuery trigger file input

Examples related to javascript

Examples related to jquery

Examples related to css