在 IE 中可以打开文件输入对话框并上传 onchange 吗？
这基本上是我现在所拥有的简化内容：
<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 中（完美）做了什么：
- 表单被隐藏。
- 单击链接
- 选择文件 对话框打开
- 您选择一个文件
- 对话框关闭
- 提交表单 执行
- iframe 中的脚本并替换照片
非常高科技和甜蜜。
在 IE 中，除了 [6] 之外，所有这些都有效。表格未提交。 JavaScript 错误：“访问被拒绝”。无论表单如何不可见，只要对话框是使用 input.click() 打开的，表单就无法在更改时提交。 （onchange 函数执行得很好。错误仅在调用 form.submit() 时发生。）
现在这一切我都可以接受。 IE 太烂了。我忍受它。
到目前为止，我的解决方案是检查导航器中的“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') ，因为这不灵活而且不一定正确。
This is basically and simplified what I have now:
<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>
What it does (perfectly) in Chrome 11 and FF 4:
- The form is hidden.
- You click the link
- Choose file dialog opens
- You select a file
- Dialog closes
- Form is submitted
- Script in iframe is executed and photo is replaced
Very hightechlike and sweet.
In IE, all of that works, except [6]. The form isn't submitted. Javascript error: "Access denied". Doesn't matter how the form is invisible, as long as the dialog was opened with input.click() the form can't be submitted on change. (The onchange function is executed fine. The error only occurs when form.submit() is called.)
Now all of this I can accept. IE sucks. I live with it.
My solution so far was to check the navigator for "MSIE" and then when clicking the link instead of opening the dialog, showing the form (with the file input). Then the user has to click the actual, ugly file input and then everything works fine. But ugly.
The question is twofold:
- Is there a way to do this in IE as cool as it is in Chrome? WITHOUT nasty flash/java crap. Only html elements andjavascript.
- If not: is there a way to check for form.submit() support after opening the dialog from a link (besides
!navigator.contains("MSIE"))?
[2] could be catching the "Access denied" exception thrown in IE, but then it's too late: the user has already opened the dialog and browsed to the photo. You don't wanna make him do that again. (Even IE users don't deserve that.)
PS. I'm only interested in Chrome 10+, Firefox 3.6+ and IE8+.
PS. Might be important: the file input element can't be anywhere near the link, because the link is inside a form and that form is (must be) separate from the file upload form.
UPDATE
Second best: detect support for this high-techlike behaviour that only doesn't work in IE. I don't wanna use navigator.appName.contains('MSIE') because that's not flexible and not necessarily true.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
@Rudie，在这里 - 感谢您的代码！它在 IE 和 Chrome 中运行良好，但在 FireFox 中则不然。
我设法采用我的旧代码（适用于 FF 和 Chrome）并将您的代码合并为 MSIE。
在这里查看：
修复 IE、CHROME 和 FIREFOX
https://gist.github .com/4337047
问题：
当通过脚本化的强制 click() 事件打开文件输入时，IE 不会让您提交表单。
如果您通过自己的鼠标单击文件输入（我们不希望这样做），IE 将让您提交表单。
请注意，截至目前，如果文件输入字段通过脚本化“单击”事件发生更改，则 IE11 允许提交表单。
解决方案
（部分感谢 Rudie @ Stackoverflow，https://stackoverflow.com/users/247372/rudie，http://hotblocks.nl/)：
为IE中的输入做一个标签。如果您单击它，它将强制单击输入字段 - 并且 IE 会接受这一点（笨蛋 IE 认为用户单击了输入字段，哈哈）
所以在该标签中我们将放置我们自己样式的 DIV。
下一个问题是，这在 FF 中不起作用。因此，我们进行了一个简单的（可能是令人讨厌的）浏览器检查，并根据浏览器我们将显示不同的按钮。
解决方案就在这里。测试环境：
欢迎更多测试/添加代码！
编辑：
引用罗伊·麦肯齐
@Rudie, up here - Thanks for that code! It works great in IE and Chrome, but not in FireFox.
I managed to take my old code (That works in FF and Chrome) and combined your code for MSIE.
Check it out here:
FIX FOR IE, CHROME AND FIREFOX
https://gist.github.com/4337047
PROBLEM:
When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form.
If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.
Please note that IE11, as of now, is allowing the form to submit if a file input field has changed via a scripted 'click' event.
Solution
(partly thanks to Rudie @ Stackoverflow, https://stackoverflow.com/users/247372/rudie , http://hotblocks.nl/):
Make a label for the input in IE. If you click it, it will force a click on the input field - and IE will accept that (dumbass IE thinks user clicked the input field, hah)
So in that label we'll put our own styled DIV.
Next problem was, this doesn't work in FF. So we made a simple (possible nasty) browser check, and based on the browser we'll show a different button.
Solution is right here. Tested in:
More tests / additions to code are MORE than welcome!
EDIT:
To quote Roy McKenzie
我做到了！！
http://jsfiddle.net/rudiedirkx/8hzjP/show/
IE8 有效。我不关心别人。
太简单了 =)
I did it!!
http://jsfiddle.net/rudiedirkx/8hzjP/show/
IE8 works. I don't care about others.
So easy =)
确实很奇怪，只有当表单中存在
enctype="multipart/form-data"时，IE8 才会阻止提交。在本地对我有用的一种解决方法是添加“真正的”提交按钮，例如
然后提交这样的代码：
如果这有效，您可能可以使用 CSS 隐藏按钮以使其对用户透明。
Strange indeed, IE8 block the submission only if there's
enctype="multipart/form-data"in the form.One workaround that worked for me locally is adding "real" submit button e.g.
Then have such code to submit:
If this works you can probably hide the button with CSS to make it transparent to the user.
嗯，这和我现在遇到的问题完全相同。唯一能解决的（恶心的）黑客就是用 CSS 使 input[type=file] 相当大，使其 alpha=0 并将其放在您想要的 UI 元素的顶部。
简而言之，您让用户在没有意识到的情况下单击丑陋的“浏览”按钮。
Well, this is the EXACT same problem I'm having right now. And only (disgusting) hack that did solve is to make the input[type=file] quite big with CSS, make it alpha=0 and put it on top of your intended UI element.
In short, you're making the user click the ugly "browse" button without him/her realizing.
尝试将标签
enctype="multipart/form-data"添加到form元素中。Try adding the tag
enctype="multipart/form-data"to yourformelement.