Jquery trigger file input

问题:

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.

回答1:

This is due to a security restriction.

I found out that the security restriction is only when the 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.

回答2:

this worked for me:

JS:

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

HTML:

CSS:

.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: http://jsfiddle.net/5Rh7b/

HTML:

      Click Me! 
 

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

回答3:

You can use LABEL element ex.

     Click Me     // 
 

This will trigger the input file

回答4:

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

回答5:

Check out my fiddle.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {   visibility: hidden; }  #uploadIcon {   cursor: pointer; }

回答6:

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

回答7:

Correct code:

回答8:

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

回答9:

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

回答10:

or else simply

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

回答11:

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

  
            Select your new picture   
 

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

回答12:

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. Example:

$('.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.

回答13:

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 :)

回答14:

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

回答15:

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

var hiddenFile = $(""); $('body').append(hiddenFile);  $('#aPhotoUpload').click(function () {     hiddenFile.trigger('click');     if ($.browser.msie)         hiddenFile.trigger('change'); });  hiddenFile.change(function (e) {     alert('TODO'); }); 

回答16:

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.

回答17:

i had problems with custom client side validation for 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; } 

回答18:

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:

Upload 

回答19:

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.

文章来源: Jquery trigger file input