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

Open file input dialog and upload onchange possible in IE?

提问by Rudie

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:

它在 Chrome 11 和 FF 4 中（完美地）做什么：

1. The form is hidden.
2. You click the link
3. Choose file dialog opens
4. You select a file
5. Dialog closes
6. Form is submitted
7. Script in iframe is executed and photo is replaced

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

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.)

在 IE 中，所有这些都有效，除了 [6]。表单未提交。Javascript 错误：“访问被拒绝”。表单如何隐藏并不重要，只要打开对话框时input.click()表单就不能提交更改。（ onchange 函数执行正常。错误仅在form.submit()调用时发生。）

Now all of this I can accept. IE sucks. I live with it.

现在这一切我都能接受。IE 很烂。我忍受它。

My solution so far was to check the navigatorfor "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.

到目前为止，我的解决方案是检查navigator“MSIE”，然后单击链接而不是打开对话框时，显示表单（带有文件输入）。然后用户必须单击实际的、丑陋的文件输入，然后一切正常。但是丑。

The question is twofold:

问题是双重的：

1. 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.
2. If not: is there a way to check for form.submit() support after opening the dialog from a link (besides !navigator.contains("MSIE"))?

1. 有没有办法在 IE 中做到这一点，就像在 Chrome 中一样酷？没有讨厌的 flash/java 废话。只有 html 元素和javascript。
2. 如果不是：有没有办法在从链接打开对话框后检查 form.submit() 支持（除了!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.)

[2] 可能会捕获 IE 中抛出的“拒绝访问”异常，但为时已晚：用户已经打开对话框并浏览到照片。你不想让他再那样做。（即使是 IE 用户也不值得这样做。）

PS. I'm only interested in Chrome 10+, Firefox 3.6+ and IE8+.

附注。我只对 Chrome 10+、Firefox 3.6+ 和 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.

更新
次佳：检测对这种仅在 IE 中不起作用的高科技行为的支持。我不想使用，navigator.appName.contains('MSIE')因为这不灵活，也不一定正确。

采纳答案by Rudie

I did it!!

我做到了！！

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

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

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

IE8 works. I don't care about others.

IE8 有效。我不在乎别人。

So easy =)

这么简单=)

回答by Rob

@Rudie, up here - Thanks for that code! It works great in IE and Chrome, but not in FireFox.

@Rudie，在这里 - 谢谢你的代码！它适用于 IE 和 Chrome，但不适用于 FireFox。

I managed to take my old code (That works in FF and Chrome) and combined your code for MSIE.

我设法采用了我的旧代码（在 FF 和 Chrome 中有效）并将您的代码组合到 MSIE 中。

Check it out here:

在这里查看：

FIX FOR IE, CHROME AND FIREFOX

修复 IE、Chrome 和 Firefox

https://gist.github.com/4337047

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.

问题：当通过脚本化的强制 click() 事件打开文件输入时，IE 不会让您提交表单。如果您通过自己的鼠标单击文件输入（我们不想要的），IE 将让您提交表单。

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.

请注意，截至目前，IE11 允许在文件输入字段通过脚本化的“单击”事件更改时提交表单。

Solution(partly thanks to Rudie @ Stackoverflow, https://stackoverflow.com/users/247372/rudie, http://hotblocks.nl/):

解决方案（部分原因是由于Rudie @＃1，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)

为 IE 中的输入制作标签。如果你点击它，它会强制点击输入字段 - IE 会接受（愚蠢的 IE 认为用户点击了输入字段，哈哈）

So in that label we'll put our own styled DIV.

所以在那个标签中，我们将放置我们自己风格的 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.

下一个问题是，这在 FF 中不起作用。所以我们做了一个简单的（可能是讨厌的）浏览器检查，并基于浏览器我们将显示一个不同的按钮。

Solution is right here. Tested in:

解决方案就在这里。测试于：

• Win 7 x64
• FireFox 13.01
• Chrome 23.0.1271.97 m
• IE9 in regular IE9 mode

• 赢 7 x64
• 火狐 13.01
• 铬 23.0.1271.97 m
• 常规 IE9 模式下的 IE9

More tests / additions to code are MORE than welcome!

非常欢迎更多的测试/添加代码！

EDIT:

编辑：

To quote Roy McKenzie

引用罗伊·麦肯齐的话

IE11 is now allowing the form to submit if a file input field has changed via a scripted 'click' event.

如果文件输入字段已通过脚本化的“单击”事件更改，IE11 现在允许表单提交。

回答by Engin

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.

嗯，这是我现在遇到的完全相同的问题。并且唯一解决的（恶心的）hack 是使用 CSS 使 input[type=file] 变得相当大，使其 alpha=0 并将其放在您想要的 UI 元素之上。

In short, you're making the user click the ugly "browse" button without him/her realizing.

简而言之，您让用户在他/她没有意识到的情况下点击了丑陋的“浏览”按钮。

回答by Shadow Wizard is Ear For You

Strange indeed, IE8 block the submission only if there's enctype="multipart/form-data"in the form.

确实很奇怪，IE8 只有enctype="multipart/form-data"在表单中有提交时才会阻止提交。

One workaround that worked for me locally is adding "real" submit button e.g.

在本地对我有用的一种解决方法是添加“真正的”提交按钮，例如

<input type="submit" id="btnSubmit" value="Submit" />

Then have such code to submit:

然后有这样的代码提交：

$('btnSubmit').click();

If this works you can probably hide the button with CSS to make it transparent to the user.

如果可行，您可以使用 CSS 隐藏按钮以使其对用户透明。

回答by Rodrigo Da Silva Guerra

Try adding the tag enctype="multipart/form-data"to your formelement.

尝试将标签添加enctype="multipart/form-data"到您的form元素。