javascript - javascript触发对话框打开时如何使IE8/9提交输入类型="file"

Question

如果我在某处有一个 input type="file"，并且在点击某个链接时它也会触发对文件输入的点击。用户选择一个文件。

在 IE8/9 中，如果用户单击 button type="submit"，第一次单击会清除文件输入中的所有数据，然后第二次提交空白表单。

如何允许提交 input type="file" 后一个 javascript 点击触发器。

一些注意事项:

• 点击是由另一个点击事件触发的。在事件中。
• input type="file"未设置显示:none。
• 未尝试操纵用户输入

想法？

Answer 1

我一直在为同样的问题而苦苦挣扎，但我还没有找到一个干净的解决方案。

不过，我发现了一个解决方法。请注意以下解决方案完全无视最佳实践(以我的拙见)，如果有人有更好、更符合标准的方法，请在此处发布。

修复按钮点击事件

经过大量研究，似乎很多人都在使用一种技巧，即他们绝对定位 <input type="file" />。立即在他们的按钮上，并将不透明度设置为零。这意味着，对于用户来说，看起来他们正在点击一个按钮，但浏览器将其视为对 <input type="file" /> 的点击。 (从而避免了 IE 中提到的问题)。我很惊讶地看到Quirksmode实际上推荐了这种方法。

修复按钮样式

现在，这确实引入了更多的外观问题；您可能会发现您的按钮不再触发它们的 :hover和 :active CSS 伪类(除非您将 <input type="file" /> 放在按钮中)，并且您的鼠标光标可能是默认鼠标光标，尽管您已将任何 CSS 应用于 <input type="file" />。或您的按钮。

这些类很容易通过 JavaScript 解决方法修复(我会把它留给你)，但光标仍然是一个问题。奇怪的是，您可以设置 cursor 的样式右手path <input type="file" \> 的一侧, 但这不会影响它的 Browse按钮。不幸的是，这个(现在透明的)按钮可能会覆盖您的样式按钮的某些部分，导致默认光标悬停。

为了解决这个问题，我偶然发现了 this work-around (JSFiddle here)。基本上，有人将事件绑定(bind)到 mousemove他们按钮的事件，并定位在 <input type="file" /> 的右侧每次将鼠标悬停在按钮上时都在鼠标光标下方。这可能还需要增强一点以停止 <input type="file" />。如果按钮没有固定大小和 overflow: hidden，则不会从按钮坐标外点击设置。

结论

总的来说，我发现样式 <input type="file" />只是不值得；黑客太多了，如果你真的想让它看起来不错，你可能在某个时候不得不使用 JavaScript(如果你试图支持禁用 JavaScript 的人，那就不太好了)。我也不知道这对移动设备有何影响。

如果您的目标是支持 Html5 File API 的较新浏览器，实现 AJAX 拖放上传解决方案(here 是一个不错的解决方案)，并摆脱 <input type="file" />共。对于那些不支持它的人(旧浏览器和禁用 JavaScript 的浏览器)，只需保留无样式的 <input type="file" />那里作为后备。