模拟点击 <input type="file" /> jQuery, Opera答案

【问题标题】：simulating a click on a <input type=“file” /> jQuery, Opera模拟点击 <input type="file" /> jQuery, Opera
【发布时间】：2012-06-15 12:14:35
【问题描述】：

我有一个没有显示的表格和输入类型的文件，我还做了一个按钮。当你点击它应该打开下载对话框。这种组合适用于除 Opera 之外的所有浏览器。如果删除显示开始工作：无；

<form id="imageform" method="post" enctype="multipart/form-data" action='' style="display: none;">
    <input type="file" name="photoimg" id="photoimg" />
</form>
<input type="button" id="upload" value="upload">

jquery：

$('#upload').on("click", function () {
    $('#photoimg').click();
});

请解释一下，如何避免这种情况。

【问题讨论】：

如果它在没有display:none 的情况下工作，那么就这样做。尝试改用visibility:hidden。

标签： jquery file file-upload opera

【解决方案1】：

如果你使用visibility: hidden而不是display:none会更好

或者您可以尝试使用纯 CSS。例如：

#photoimg {
   left: -99999px
}

或

#photoimg {
   z-index: -999
}

或

#photoimg {
   width: 0px
}

或者类似的东西

【讨论】：

左边距为-99999px？一个宽度为99999px的页面？
您不能设置文件输入元素的样式。这就是为什么使用代表点击的按钮来进行这些黑客攻击的原因。

【解决方案2】：

您可以这样做：

<div style="width:0;height:0;overflow:hidden;">
    <form id="imageform" method="post" enctype="multipart/form-data" action="">
        <input type="file" name="photoimg" id="photoimg" accept="image/*"
           onchange="document.getElementById('imageform').submit();" />
    </form>
</div>
<button id="upload" onclick="document.getElementById('photoimg').click();">
Upload</button>

【讨论】：