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

Question

如果我有某个input type="file"地方,并点击某个链接,它也会触发文件输入的点击.用户选择一个文件.

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

如何允许input type="file"javascript点击触发器提交帖子.

一些说明:

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

想法？

Answer 1

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

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

修复按钮单击事件

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

修复按钮样式

现在,这确实引入了进一步的美容问题; 你可能会发现你的按钮不再触发他们的:hover和:activeCSS伪类(除非你把<input type="file" />你的按钮放在里面),并且你的鼠标光标可能是默认的鼠标光标,尽管你已经将任何CSS应用到你<input type="file" />或你的按钮.

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

为了解决这个问题,我偶然发现了这种解决方法(这里是 JSFiddle ).基本上,有人将事件绑定到mousemove他们的按钮事件,并且<input type="file" />每次将鼠标光标悬停在按钮上时将其定位在鼠标光标下方的右侧.<input type="file" />如果按钮没有固定的尺寸和overflow: hidden设置,这可能还需要增强一点,以阻止从按钮的坐标外部点击.

结论

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

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

Answer 2

我发现使用jquery fileupload 扩展更好。它比我手动处理复杂的问题要好得多。它基本上执行 jquery 对 x-browser dom 操作和 ajax 所做的操作，但对于输入类型=“文件”。