jquery触发文件输入

我试图用jQuery来触发一个上传框(浏览按钮)。
我现在试过的方法是:

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

但似乎没有工作。 请帮忙。 谢谢。

这是由于安全限制。

我发现只有在<input type="file"/>设置为display:none; 或者是visbilty:hidden

所以我试图通过设置position:absolutetop:-100px; 而且它可以工作。

请参阅http://jsfiddle.net/DSARd/1/

称它为黑客。

希望这对你有用。

这对我工作:

JS:

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

HTML:

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

CSS:

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

>>>另一个工作跨浏览器:<<<

这个想法是,你覆盖在你的自定义按钮上的一个看不见的巨大的“浏览”按钮。 所以当用户点击你的自定义按钮时,他实际上是点击本地输入框的“浏览”按钮。

JS小提琴: http : //jsfiddle.net/5Rh7b/

HTML:

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

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

您可以使用LABEL元素ex。

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

这将触发输入文件

我有工作(=测试)在IE8 +,最近的FF和铬:

 $('#uploadInput').focus().trigger('click'); 

点击之前关键是重点(否则铬忽略它)。

注意:你需要输入显示和可见(如在,不display:none ,不visibility:hidden )。 我建议(和其他许多人一样)绝对定位输入并将其从屏幕上抛出。

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

看看我的小提琴

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

HTML:

 <body> <div class="uploadBox"> <a href="javascript:void(0)" id="uploadIcon" href=""> <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"/> </a> <input type="file" value="upload" id="uploadFile" class="uploadFile" /> </div> </body> 

Javascript:

 $("#uploadIcon").click(function(){ $(this).next().trigger('click'); }); 

CSS:

 .uploadFile { visibility : hidden; } 

它非常简单。

当adardesign被隐藏时, adardesign就会忽略文件输入元素。 我还注意到很多人将元素大小调整为0,或者通过定位和溢出调整将其推出界限。 这些都是伟大的想法。
另外一种似乎也能很好地工作的方法是将不透明度设置为0 。 那么你总是可以设置的位置,以防止抵消其他元素作为隐藏。 在任何方向移动一个近似10K像素的元素似乎有点不必要。

这是一个想要一个人的例子:

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

正确的代码:

 <style> .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 } </style> <div class="upload"> <input type='file' ID="flArquivo" onchange="upload();" /> <input type="button" value="Selecionar" onchange="open();" /> <input type='submit' ID="btnEnviarImagem" /> </div> <script type="text/javascript"> function open() { $('#flArquivo').click(); } function upload() { $('#btnEnviarImagem').click(); } </script> 

这是有目的的和设计的。 这是一个安全问题。

我管理一个简单的$(…)。click(); 与JQuery 1.6.1

或者简单地说

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

现在回答已经太迟了,但是我认为这个最小化的设置效果最好。 我也在寻找相同的。

  <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

引导文件输入按钮演示

其实,我发现了一个非常简单的方法,这是:

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

这样,你的文件输入字段可以没有CSS的属性显示 ,仍然赢得交易:)

这是一个非常古老的问题,但不幸的是,这个问题仍然是相关的,需要一个解决方案。

我提出的(令人惊讶的简单)解决方案是“隐藏”实际的文件输入字段,并用LABEL标签(可以基于Bootstrap和HTML5,用于增强)包装它。

See here: 示例代码在这里

这样,真正的文件输入字段是不可见的,你所看到的只是定制的“按钮”,它实际上是一个修改过的LABEL元素。 当你点击这个LABEL元素时,出现选择文件的窗口,你选择的文件将进入真实的文件输入字段。

最重要的是,您可以根据需要操作外观和行为(例如:从文件输入文件中获取所选文件的名称,然后将其显示在某处,LABEL元素不会自动执行该操作,当然,我通常只是把它放在LABEL里面,作为它的文字内容)。

当心虽然! 这种外观和行为的操纵只限于你想象和想象的东西。 😉 😉

只是为了好奇,你可以通过动态创建一个上传表单和输入文件,而不需要把它添加到DOM树来做一些你想要的事情。 例:

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

不需要将uploadForm添加到DOM。

试试这个,这是一个黑客。 位置:绝对是为Chrome和触发(“更改”)是为IE。

 var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />"); $('body').append(hiddenFile); $('#aPhotoUpload').click(function () { hiddenFile.trigger('click'); if ($.browser.msie) hiddenFile.trigger('change'); }); hiddenFile.change(function (e) { alert('TODO'); }); 

我的问题是在iOS 7上有点不同。事实证明FastClick导致了问题。 我所要做的就是将class="needsclick"添加到我的按钮中。

这可能是最好的答案,请记住跨浏览器的问题。

CSS:

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

JS:

 $(".file-upload").on('click',function(){ $("[name='file']").click(); }); 

HTML:

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

我有自定义客户端验证<input type="file"/>而使用一个假按钮来触发它和@Guillaume Bodi的解决方案为我工作(也在opacity: 0;在铬)

 $("#MyForm").on("click", "#fake-button", function () { $("#uploadInput").focus().trigger("click"); }); 

和CSS风格的上传输入

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

基于Guillaume Bodi的回答,我做到了这一点:

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

这意味着它隐藏起来,然后显示为触发器,然后立即再次隐藏。