这基本上和简化了我现在拥有的:
Upload photo
它在Chrome 11和FF 4中的作用(完美):
表格是隐藏的.
单击该链接
选择文件对话框打开
您选择一个文件
对话框关闭
表格已提交
执行iframe中的脚本并替换照片
非常高科技和甜蜜.
在IE中,所有这些都有效,除了[6].表格未提交.Javascript错误:"访问被拒绝".无论表单如何不可见,只要打开对话框input.click()
,表单就无法提交更改.(onchange函数执行正常.只有在form.submit()
调用时才会出现错误.)
现在所有这一切我都能接受.IE糟透了.我和它一起生活.
到目前为止,我的解决方案是检查navigator
"MSIE",然后单击链接而不是打开对话框,显示表单(带文件输入).然后用户必须单击实际的,丑陋的文件输入,然后一切正常.但丑陋.
问题有两个:
有没有办法在IE中像Chrome一样酷?没有讨厌的flash/java垃圾.只有html元素和JavaScript.
如果没有:有没有办法从链接打开对话框后检查form.submit()支持(除此之外!navigator.contains("MSIE")
)?
[2]可能正在捕获IE中抛出的"拒绝访问"异常,但是为时已晚:用户已经打开对话框并浏览到照片.你不想让他再这样做.(即使是IE用户也不配.)
PS.我只对Chrome 10 +,Firefox 3.6+和IE8 +感兴趣.
PS.可能很重要:文件输入元素不能在链接附近的任何地方,因为链接在表单内,并且该表单(必须)与文件上载表单分开.
更新
第二好:检测对这种仅在IE中不起作用的高科技行为的支持.我不想使用,navigator.appName.contains('MSIE')
因为这不灵活,不一定是真的.
@Rudie,在这里 - 感谢您的代码!它在IE和Chrome中运行良好,但在FireFox中运行不佳.
我设法使用我的旧代码(适用于FF和Chrome)并将您的代码合并到MSIE中.
看看这里:
修复IE,CHROME和FIREFOX
https://gist.github.com/4337047
问题: 当通过脚本化的强制click()事件打开文件输入时,IE将不允许您提交表单.如果您通过自己的鼠标(我们不想要的)单击文件输入,IE将允许您提交表单.
请注意,IE11,截至目前,如果文件输入字段已通过脚本化的"点击"事件更改,则允许表单提交.
解决方案 (部分原因是由于Rudie @#1,/sf/ask/17360801/,http://hotblocks.nl/):
在IE中为输入制作标签.如果你点击它,它将强制点击输入字段 - IE将接受(dumbass IE认为用户点击了输入字段,哈哈)
所以在那个标签上我们将放置自己的风格DIV.
接下来的问题是,这在FF中不起作用.所以我们做了一个简单的(可能讨厌的)浏览器检查,并根据浏览器我们将显示一个不同的按钮.
解决方案就在这里.测试中:
赢7 x64
FireFox 13.01
Chrome 23.0.1271.97 m
IE9在常规IE9模式下
对代码的更多测试/添加非常受欢迎!
编辑:
引用Roy McKenzie的话
如果文件输入字段已通过脚本化的"单击"事件更改,IE11现在允许表单提交.
我做的!!
http://jsfiddle.net/rudiedirkx/8hzjP/show/
IE8有效.我不在乎别人.
这么容易=)