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

Question

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

<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="/user/photo">Upload photo</a>

<script>
$('uf').addEvent('change', function(e) {
  // alert('oele'); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
  $('uf').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>

它在Chrome 11和FF 4中的作用(完美):

1. 表格是隐藏的.
2. 单击该链接
3. 选择文件对话框打开
4. 您选择一个文件
5. 对话框关闭
6. 表格已提交
7. 执行iframe中的脚本并替换照片

非常高科技和甜蜜.

在IE中,所有这些都有效,除了[6].表格未提交.Javascript错误:"访问被拒绝".无论表单如何不可见,只要打开对话框input.click(),表单就无法提交更改.(onchange函数执行正常.只有在form.submit()调用时才会出现错误.)

现在所有这一切我都能接受.IE糟透了.我和它一起生活.

到目前为止,我的解决方案是检查navigator"MSIE",然后单击链接而不是打开对话框,显示表单(带文件输入).然后用户必须单击实际的,丑陋的文件输入,然后一切正常.但丑陋.

问题有两个:

1. 有没有办法在IE中像Chrome一样酷？没有讨厌的flash/java垃圾.只有html元素和JavaScript.
2. 如果没有:有没有办法从链接打开对话框后检查form.submit()支持(除此之外!navigator.contains("MSIE"))？

[2]可能正在捕获IE中抛出的"拒绝访问"异常,但是为时已晚:用户已经打开对话框并浏览到照片.你不想让他再这样做.(即使是IE用户也不配.)

PS.我只对Chrome 10 +,Firefox 3.6+和IE8 +感兴趣.

PS.可能很重要:文件输入元素不能在链接附近的任何地方,因为链接在表单内,并且该表单(必须)与文件上载表单分开.

更新
第二好:检测对这种仅在IE中不起作用的高科技行为的支持.我不想使用,navigator.appName.contains('MSIE')因为这不灵活,不一定是真的.

Answer 1

@Rudie,在这里 - 感谢您的代码!它在IE和Chrome中运行良好,但在FireFox中运行不佳.

我设法使用我的旧代码(适用于FF和Chrome)并将您的代码合并到MSIE中.

看看这里:

修复IE,CHROME和FIREFOX

https://gist.github.com/4337047

问题: 当通过脚本化的强制click()事件打开文件输入时,IE将不允许您提交表单.如果您通过自己的鼠标(我们不想要的)单击文件输入,IE将允许您提交表单.

请注意,IE11,截至目前,如果文件输入字段已通过脚本化的"点击"事件更改,则允许表单提交.

解决方案 (部分原因是由于Rudie @#1,/sf/users/17316071/,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现在允许表单提交.

Answer 2

我做的!!

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

<label for="picture">Upload picture</label>
<input type="file" id="picture" style="position: absolute; visibility: hidden" />

IE8有效.我不在乎别人.

这么容易=)