jquery触发文件输入
我试图用jQuery来触发一个上传框（浏览按钮）。
我现在试过的方法是：
$('#fileinput').trigger('click'); 但似乎没有工作。 请帮忙。 谢谢。
这是由于安全限制。
我发现只有在<input type="file"/>设置为display:none; 或者是visbilty:hidden 。
所以我试图通过设置position:absolute和top:-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(); });
这意味着它隐藏起来，然后显示为触发器，然后立即再次隐藏。
