使用 jQuery 模拟输入=文件单击时出现奇怪的 IE 故障

Question

我"制作"了这段jQuery + html来完成以下任务：

有一个用户可以单击的占位符图像，这会导致打开文件选择对话框。选择文件后，相应的多部分表单将上传到服务器。我正在尝试模仿此文件上传的 AJAX 行为，因此我还使用不可见的 iframe 来接收服务器响应。

让我先介绍代码，这样解释问题会更容易

jQuery("#myInput").change(function () {  // Submit form upon file selection
   // alert("myInput.val() = " + $('#myInput').val());  // alert 1
    $('#form1').submit();
   // alert("myInput.val() = " + $('#myInput').val());  // alert 2
});
<form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
<input id="myInput" type="file" name="userfile" /><br>
</form>
<img src="/img/placeholder.png" onclick="$('#myInput').click();" >
<iframe id="target_frame" name="target_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

该代码在新的Chrome/Firefox/Safari上完美运行。(有趣的是，如果我在myInput上设置visibility: hidden;，它甚至可以工作。所以显然这不是一个太大的安全问题(。但是，IE 9 和 10 都显示相同的行为：单击图像成功打开对话框，文件路径在"警报 1"中正确设置，但在"警报 2"中消失，并且表单未提交。另一方面，直接单击myInput的浏览按钮会正确打开对话框并提交表单。

我对这种行为怎么可能感到非常困惑！任何关于如何对抗烦人的IE的建议将不胜感激:)

Answer 1

我相信这是IE的安全功能。 如果使用其他触发器，则不允许访问文件输入的 name 属性。

必须单击 IE 的文件输入，而不能使用其他触发器。

编辑：解决方法IE在提交时清除输入[类型="文件"]

Answer 2

我决定采用在我的图像上覆盖透明文件元素的方法。我的灵感来自这个页面：https://coderwall.com/p/uer3ow。这是我需要的HTML和CSS：

.file_loader {
    position: relative;
    overflow: hidden;
    border: solid gray 1px;
    margin: auto;
    width: 300px;
    height: 400px;  
}
.file_loader .hidden_file {
    display: block;
    background: white;
    font-size: 80px;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.placeholder {
    height: 100%;
    width: 100%;
}
<div class="file_loader">
    <img src="/img/placeholder.png" id="placeholder1" class="placeholder" >
    <form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
    <input id="myInput" class="hidden_file" type="file" name="userfile" /><br>
    </form>
</div>

如您所见，"file_loader"类的高度和宽度强制了占位符图像和透明输入=文件元素覆盖的尺寸。在这个CSS中有一个东西是真正聪明的，它来自那个链接。我说的是设置文件元素的非常大的字体大小。这是使其在IE中工作的关键，因为它恰好使"浏览"按钮如此巨大，以至于它填满了整个占位符。在不更改字体大小的情况下，在IE中，您最终只能看到图像的一部分能够显示文件对话框(其余的将是透明文本字段(。我要指出的是，在Chrome/Firefox/Safari中，这种字体大小技巧是不必要的，因为整个文件元素都可以在那里点击。