我正在尝试使用 jQuery 触发上传框（浏览按钮）。
我现在试过的方法是：
$('#fileinput').trigger('click');
但它似乎不起作用。请帮忙。谢谢你。
jQuery触发文件输入
IT技术
javascript
jquery
css
2021-01-16 04:18:04
6个回答
这是由于安全限制。
我发现安全限制仅当<input type="file"/>设置为display:none;或 时visbilty:hidden。
所以我尝试通过设置将它定位在视口之外position:absolute，top:-100px;然后它就可以工作了。
称之为黑客。
希望这对你有用。
这对我有用：
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 和 chrome 中工作（=测试）：
$('#uploadInput').focus().trigger('click');
关键是在点击之前聚焦（否则 chrome 会忽略它）。
注意：您确实需要显示和可见您的输入（例如， notdisplay:none和 not visibility:hidden）。我建议（和其他许多人一样）绝对定位输入并将其扔出屏幕。
#uploadInput {
position: absolute;
left: -9999px;
}
看看我的小提琴。
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" width="20px" height="20px"/>
</label>
<input type="file" value="upload" id="uploadFile" class="uploadFile" />
</div>
</body>其它你可能感兴趣的问题