javascript 使用Javascript触发IE9文件输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8838485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE9 file input triggering using Javascript
提问by Brodie
I had a post here:
我在这里发了一个帖子：
However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.
但是，我遇到了一个关于文件上传表单处理的新事件，并且很好奇是否有人遇到过这个问题。
My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.
我最初的问题是我无法让 onchange 事件起作用，我认为这可能是我的 javascript 的问题，但我发现这与激活表单的方式有关。
I have a file input
我有一个文件输入
<input type="file" name="abc"/>
now I've done 2 things.
现在我做了两件事。
I've hidden the input and created a button (for better styling control) that activates the input.
我隐藏了输入并创建了一个按钮（为了更好的样式控制）来激活输入。
<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>
and then the JS for the interaction between the two:
然后是用于两者交互的JS：
$("#mybutton").click(function() {
$("Input[type=file]").click()
};
and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).
当然还有表单的提交（我在这个例子中使用 parent，但在我的实际代码中我使用表单 id）。
$("input[type=file]").change(function() {
$(this).parent().submit();
});
When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()
当我单击“我的按钮”时，预期的结果确实发生了，我的浏览窗口打开并让我从我的计算机中选择一个文件。此外，当我在 IE 以外的所有浏览器中更改文件时，会触发 onchange 事件。现在，如果我取消隐藏表单并手动单击“浏览”按钮并选择一个文件，则会触发 onchange 事件。所以基本上浏览器对待点击实际文件按钮的方式不同于执行 $("input[type=file]").click()
anyone know how to fix this?
有人知道怎么修这个东西吗？
回答by A. Clement
As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.
如前所述，IE 在提交包含文件输入的表单时非常严格。文件输入必须通过真正的鼠标点击触发才能提交表单。此外，IE9 和文件输入似乎存在错误。
The good news is that there is a way to bypass the security restriction from IE using a label :
好消息是，有一种方法可以使用标签绕过 IE 的安全限制：
- Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
- Disguise the label as a button using CSS.
- The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.
- 创建链接到文件输入的常规标签标记。标签将像往常一样触发输入文件。
- 使用 CSS 将标签伪装成按钮。
- 必须显示文件输入（对于 IE8），但可以使用“visibility: hidden”隐藏。IE8 会接受这个黑客。
回答by Ali
If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.
如果我没弄错的话，你不能改变它，因为这（最初）是为了保护用户的隐私，避免在没有明确用户许可/操作的情况下上传文件。
回答by bizl
make sure your code is in
$("document").ready(function(){... here..});seems file inputs when wired up with
.live("change", function(){});dont quite work well
确保您的代码在
$("document").ready(function(){... here..});连接时似乎文件输入
.live("change", function(){});不太好用
the other styling stuff is something else but the CSS isn't all that complicated - beautiful file upload
其他样式的东西是别的东西，但 CSS 并不是那么复杂 -漂亮的文件上传
