我试图使用jQuery触发上传框（浏览按钮）。 我现在尝试的方法是：
$('#fileinput').trigger('click');
但它似乎没有用。请帮忙。谢谢。
这是由于安全限制。
我发现安全限制只有在<input type="file"/>设置为display:none;或visbilty:hidden时。
所以我尝试通过设置position:absolute和top:-100px;并将它定位在视口之外。
称之为黑客。
希望对你有用。
实际上，我发现了一个非常简单的方法，它是：
$('#fileinput').show().trigger('click').hide();
这样，您的文件输入字段可以显示无css属性，仍然赢得交易:)
现在回答为时已晚，但我认为这种最小化设置效果最佳。我也在寻找同样的东西。
<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;
}
这是一个非常古老的问题，但不幸的是，这个问题仍然存在，需要一个解决方案。
我提出的（非常简单的）解决方案是“隐藏”实际的文件输入字段并用LABEL标记包装它（可以基于Bootstrap和HTML5进行增强）。
See here:Example code here
这样，真正的文件输入字段是不可见的，你看到的只是自定义的“按钮”，它实际上是一个修改过的LABEL元素。单击此LABEL元素时，将出现选择文件的窗口，您选择的文件将进入实际文件输入字段。
最重要的是，您可以根据需要操作外观和行为（例如：在选择后从文件输入文件中获取所选文件的名称，并在某处显示.LABEL元素不会自动执行此操作，当然。我通常把它放在LABEL中，作为其文本内容）。
要小心！对它的外观和行为的操纵仅限于你能想象和想到的任何东西。 ;-) ;-)
我用一个简单的$（...）管理.Click（）;使用JQuery 1.6.1
或者简单地说
$(':input[type="file"]').show().click().hide();
我在<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;
}
试试这个，这是一个黑客。位置：绝对是针对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">
根据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();
});
这意味着它隐藏起来然后显示为触发器，然后立即再次隐藏。
这对我有用：
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');
关键是在点击之前聚焦（否则铬会忽略它）。
注意：您需要显示和显示您的输入（如，不是display:none而不是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>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);
}
只是为了好奇，您可以通过动态创建上传表单和输入文件来执行您想要的操作，而无需将其添加到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。
正确的代码：
<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>
这是故意的和设计的。这是一个安全问题。