jQuery触发文件输入
Posted
技术标签:
【中文标题】jQuery触发文件输入【英文标题】：jQuery trigger file input 【发布时间】：2010-10-22 00:52:59 【问题描述】：我正在尝试使用 jQuery 触发上传框（浏览按钮）。 我现在尝试的方法是：
$('#fileinput').trigger('click');
但它似乎不起作用。 请帮忙。谢谢。
【问题讨论】：
确实很郁闷，而且是“点击”触发的，真的吗？我更喜欢 Flash/AS3，它具有严格的 API 和强大的安全模型，只允许从用户启动的输入事件处理程序调用 FileReference.browse。此外，html 文件的输入很丑陋且无法设置样式（它只是一个输入标签，对于内容和样式的分离来说非常重要），因此您必须创建一个新的“浏览”按钮，该按钮也由点击事件激活...您必须通过单击将其转发到文件输入...这可能导致无限递归，具体取决于元素放置和事件委托的特异性。 不幸的是，考虑到 Flash 持续存在的安全问题以及内容拦截器的兴起，使用 Flash 变得越来越不可行。 【参考方案1】：这是由于安全限制。
我发现只有当<input type="file"/>设置为display:none;或者是visbilty:hidden时才会有安全限制。
所以我尝试通过设置position:absolute 和top:-100px; 将其定位在视口之外，然后瞧，它可以工作了。
见http://jsfiddle.net/DSARd/1/
称之为 hack。
希望对你有用。
【讨论】：
在 ff 3.6 中不起作用。虽然适用于 chrome 甚至 ie 8 :) msdn 上有没有关于安全限制的文档？ 效果很好。无论如何，我认为设置left: -100px; 更安全。你永远不知道一个页面能有多长
+1 这是真正的答案（也是一个很好的解决方案）。有没有人有明确说明的文档链接？
你也可以只设置不透明度为0【参考方案2】：
这对我有用：
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());
);
);
【讨论】：
有一个缺陷，如果你让按钮变宽，那么在 IE9/10 中，不可见的上传按钮由右侧按钮和左侧文本字段组成。对此，您必须双击。在这种情况下，尝试将字体大小设置为大于 100 像素； 即使在 Chrome 53 中也可以使用。但是，建议将height 更改为 height: 100%
第二个甚至可以在 ios 上的 Safari 中使用。非常好！【参考方案3】：
您可以使用 LABEL 元素 例如。
<div>
<label for="browse">Click Me</label>
<input type="file" id="browse" name="browse" style="display: none">//
</div>这将触发输入文件
【讨论】：
我刚刚进行了编辑，没有注意到我没有登录，现在我无法编辑它。简而言之，出于可访问性的原因，标签标签应包含 tabindex="1"（无论它应该是什么标签顺序索引）和 role="button" 属性） 对于我使用的输入：opacity: 0; height: 0; width: 0; margin: 0; display: inline;
不幸的是，这在 iOS 上的 Safari 中不起作用:(【参考方案4】：
我已经在 IE8+、最近的 FF 和 chrome 中工作（=测试）：
$('#uploadInput').focus().trigger('click');
关键是在在触发点击之前聚焦（否则 chrome 会忽略它）。
注意：您确实需要显示和显示您的输入（例如，不是display:none 和visibility:hidden）。
我建议（就像许多其他人以前一样）绝对定位输入并将其从屏幕上扔掉。
#uploadInput
position: absolute;
left: -9999px;
【讨论】：
+1。我还注意到您可以隐藏周围元素但不能隐藏文件输入按钮，然后显示周围元素，聚焦按钮，激活它，然后隐藏按钮。【参考方案5】：看看我的小提琴。
http://jsfiddle.net/mohany2712/vaw8k/
.uploadFile
visibility: hidden;
#uploadIcon
cursor: pointer;
<body>
<div class="uploadBox">
<label for="uploadFile" id="uploadIcon">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png" />
</label>
<input type="file" value="upload" id="uploadFile" class="uploadFile" />
</div>
</body>【讨论】：
【参考方案6】：出于好奇，您可以通过动态创建上传表单和输入文件来做您想做的事情，而无需将其添加到 DOM 树中：
$('.your-button').on('click', function()
let uploadForm = document.createElement('form');
let fileInput = uploadForm.appendChild(document.createElement('input'));
fileInput.type = 'file';
fileInput.name = 'images';
fileInput.multiple = true;
fileInput.click();
);
无需将uploadForm添加到DOM。
【讨论】：
【参考方案7】：adardesign 指出文件输入元素在隐藏时会被忽略。我还注意到许多人将元素大小更改为 0，或者通过定位和溢出调整将其推出边界。这些都是很棒的想法。 另一种似乎效果很好的替代方法是只需将不透明度设置为 0。然后你总是可以像 hide 一样设置位置以防止它偏移其他元素。将元素向任何方向移动近 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);
【讨论】：
【参考方案8】：其实我发现了一个很简单的方法，就是：
$('#fileinput').show().trigger('click').hide();
这样，您的文件输入字段可以在 none 上有 css 属性 display 并且仍然可以赢得交易 :)
【讨论】：
它可能会在较慢机器上的屏幕上闪烁。不是最佳解决方案【参考方案9】：正确代码：
<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>
【讨论】：
【参考方案10】：这是故意和设计的。这是一个安全问题。
【讨论】：
【参考方案11】：现在回答为时已晚，但我认为这种最小设置效果最好。我也在找一样的。
<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
bootstrap file input buttons demo
【讨论】：
【参考方案12】：这是一个非常古老的问题，但不幸的是，这个问题仍然相关，需要解决方案。
我想出的（非常简单的）解决方案是“隐藏”实际的文件输入字段并用 LABEL 标签包装它（可以基于 Bootstrap 和 HTML5，以进行增强）。
See here:Example code here
这样，真正的文件输入字段是不可见的，你看到的只是自定义的“按钮”，它实际上是一个修改后的 LABEL 元素。 当你点击这个 LABEL 元素时，选择文件的窗口就会出现，你选择的文件将进入真正的文件输入字段。
最重要的是，您可以根据需要操作外观和行为（例如：从文件输入文件中获取所选文件的名称，在选择后，并将其显示在某处。LABEL 元素不起作用当然是自动的。我通常只是把它放在 LABEL 里面，作为它的文本内容）。
不过要小心！对其外观和行为的操纵仅限于您可以想象和想到的任何内容。 ;-) ;-)
【讨论】：
【参考方案13】：我用一个简单的 $(...).click();使用 JQuery 1.6.1
【讨论】：
嗯，很好奇你是怎么做到的，在我的网站 (www.iscriptdesign.com) 上做 $('file:input').click() 没有做任何事情，也没有 $('file :input').trigger('click'); 这里是完整的例子： 我在 mac os 上的 cr（不确定是什么版本）上进行了测试，但可以在 XP 上的 FF 4 上运行。谢谢！【参考方案14】：或者干脆
$(':input[type="file"]').show().click().hide();
【讨论】：
【参考方案15】：您可以从 JQuery 中单击输入文件，同时将其完全隐藏。
我正在使用这个：
< input type="file" name="article_input_file" id="article_input_file" accept=".xlsx,.xls" style="display: none" >
$("#article_input_file").click();
这适用于 HTML 页面中的任何标准脚本标记。
【讨论】：
【参考方案16】：我在使用假按钮触发<input type="file"/> 时遇到了自定义客户端验证问题，@Guillaume Bodi 的解决方案对我有用（也适用于 chrome 上的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;
【讨论】：
【参考方案17】：试试这个，这是一个 hack。 Position:absolute 用于 Chrome，trigger('change') 用于 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');
);
【讨论】：
请注意，$.browser 在较新版本的 jQuery 中已弃用【参考方案18】：
我的问题在 iOS 7 上有点不同。结果是 FastClick 引起了问题。我所要做的就是将class="needsclick" 添加到我的按钮。
【讨论】：
【参考方案19】：这可能是最好的答案，请记住跨浏览器问题。
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">
【讨论】：
【参考方案20】：我想我理解你的问题，因为我也有类似的问题。
所以标签<label> 具有属性，您可以使用此属性将您的输入与type="file" 链接起来。
但是如果你不想使用这个标签来激活它，因为你的布局规则，你可以这样做。
$(document).ready(function()
var reference = $(document).find("#main");
reference.find(".js-btn-upload").attr(
formenctype: 'multipart/form-data'
);
reference.find(".js-btn-upload").click(function()
reference.find("label").trigger("click");
);
);.hide
overflow: hidden;
visibility: hidden;
/*Style for hide the elements, don't put the element "out" of the screen*/
.btn
/*button style*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></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"/>
</form>
<button class="btn js-btn-upload">click me</button>
</div>当然，您会根据自己的目的和布局对其进行调整，但这是我所知道的更容易让它发挥作用的方法！
【讨论】：
【参考方案21】：根据 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();
);
这意味着它一开始是隐藏的，然后为触发器显示，然后立即再次隐藏。
【讨论】：
以上是关于jQuery触发文件输入的主要内容，如果未能解决你的问题，请参考以下文章
jQuery - 单击文件输入的父级并触发单击事件到文件输入后，它返回“太多的递归”