html - 使用 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 的一项安全功能。如果使用另一个触发器，它将不允许您访问文件输入的名称属性。

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

编辑:解决方法IE clears input[type="file"] on submit