当前位置:  开发笔记 > 编程语言 > 正文

在IE中打开文件输入对话框并上传onchange?

如何解决《在IE中打开文件输入对话框并上传onchange?》经验,为你挑选了2个好方法。

这基本上和简化了我现在拥有的:



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')因为这不灵活,不一定是真的.



1> Rob..:

@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现在允许表单提交.


好的,但为什么要欺骗浏览器的名字呢?使用IE假装是Chrome进入网络然后抱怨无法正常工作的网站..是的:P此外,检测功能很可能会更新,因为它是jQuery.只需保持jQuery最新,你就可以了.

2> Rudie..:

我做的!!

http://jsfiddle.net/rudiedirkx/8hzjP/show/



IE8有效.我不在乎别人.

这么容易=)

推荐阅读
Chloemw
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有