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

【问题标题】：Bizarre IE glitch when simulating input=file click using jQuery使用 jQuery 模拟输入 = 文件单击时出现奇怪的 IE 故障
【发布时间】：2021-02-23 05:05:22
【问题描述】：

我“精心设计”了这段 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 都显示相同的行为：单击图像成功弹出对话框，文件路径在“alert 1”中正确设置，但在“alert 2”中消失了，并且表单没有提交.另一方面，直接点击myInput的浏览按钮会正确弹出对话框并提交表单。

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

【问题讨论】：

控制台有错误吗？
您可以尝试将图像的 onclick 回调中的 .click() 更改为 .change() 即 onclick="$( '#myInput').change();"?
click 方法总是对我不好。在研究了其他库如何解决它之后，我选择了用input 元素覆盖图像的方法，设置它的不透明度值，使其对人不可见，但相对于opacity 值不可见。所以用户总是会进行真正的点击。
所有这些聪明的 jQuery，但仍然使用内联 onclick 处理程序。为什么？
是的。 IMO，当有替代方案时，内联 JavaScript 处理程序是丑陋且不必要的。完全分开时也更容易阅读/排除故障。

标签： html jquery ajax file-upload jquery-events

【解决方案1】：

我相信这是 IE 的一项安全功能。如果使用另一个触发器，它将不允许您访问文件输入的名称属性。

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

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

【讨论】：

但我认为在逻辑上简单地隐藏 input=file 元素并模拟点击它不是安全问题。事实上，用户会看到文件对话框，并会选择他们想要的任何文件，或者关闭对话框。我认为这就是为什么我的代码可以在除 IE 之外的大多数现代浏览器中运行的原因。真正的安全问题是允许以编程方式设置 input=file 元素的值。所以实际上在我的情况下 $('#myInput').val('any_value') 不会影响任何浏览器中的值。这是完全合乎逻辑的:)

【解决方案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”类的高度和宽度强制占位符图像和透明 input=file 元素覆盖的尺寸。在这个 CSS 中有一件事非常出色，它来自那个链接。我说的是为文件元素设置非常大的字体大小。这是让它在 IE 中工作的关键，因为它恰好使“浏览”按钮变得如此巨大以至于它填满了整个占位符。在不更改字体大小的情况下，在 IE 中，您最终将只有部分图像能够显示文件对话框（其余部分将是透明文本字段）。我会指出，在 Chrome/Firefox/Safari 中，这个字体大小技巧是不必要的，因为整个文件元素都可以在那里点击。

【讨论】：