当javascript触发对话框打开时，如何使IE8 / 9提交输入类型=“文件”

Question

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

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

如何在javascript点击触发器后发布input type="file" 。

一些说明：

• 由于另一次点击事件，点击被触发。 在活动中。
• 输入类型=“文件”未设置为display：none。
• 没有尝试操纵用户输入

想法？

Answer 1

我一直在努力解决同样的问题，我还没有遇到一个干净的解决方案。

然而，我发现了一种解决方法。 请注意下面的解决方案完全忽略了最佳实践（以我的拙见），如果有人有更好的，更符合标准的方法，请在此处发布。

修复按钮单击事件

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

修复按钮样式

现在，这确实引入了进一步的美容问题; 您可能会发现您的按钮不再触发它们:hover和:active CSS伪类（除非您在按钮内放置<input type="file" /> ），并且您的鼠标光标可能是默认的鼠标光标，尽管有任何CSS你已经应用于<input type="file" />或你的按钮。

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

为了解决这个问题，我偶然发现了这种解决方法 （ 这里是 JSFiddle）。 基本上，有人将事件绑定到其按钮的mousemove事件，并且每次将鼠标悬停在按钮上时，将鼠标光标放在<input type="file" />的右侧。 如果按钮没有固定大小和overflow: hidden set，则可能还需要增强一点，以便阻止<input type="file" />从按钮的坐标外部点击。

结论

总的来说，我发现造型<input type="file" />是不值得的; 如果你真的希望它看起来不错，那么你可能会在某些时候使用JavaScript（如果你试图支持禁用JavaScript的人，那就不好了）。 我也不知道这对移动设备有何影响。

如果您的目标是支持Html5文件API的新浏览器，请实施一个AJAX拖放上传解决方案（ 这是一个很好的解决方案），并完全摆脱<input type="file" /> 。 对于那些不支持它的人（较旧的浏览器和那些禁用了JavaScript的浏览器），只需将没有样式的<input type="file" />作为后备保留。

Answer 2

我发现使用jquery fileupload扩展更好。 它比我手动操作时更能处理错综复杂的错误。 它基本上做了jquery为x-browser dom操作和ajax做的事情，但输入type =“file”。