IE9文件输入触发使用Javascript [英] IE9 file input triggering using Javascript

问题描述

这里有一个帖子：

我原来的问题是，我不能得到一个onchange事件的工作，我想也许这是我的JavaScript的问题，但我发现它有一个文件输入

$ pre > < input type =filename =abc/>


现在我做了2件事。

我隐藏了输入并创建了一个按钮（用于更好的样式控制）来激活输入。

 < button id =mybutton>点击上传图片< / button> 
< input type =filename =abc/> 
  

然后在JS之间进行交互：
$ b点击（）函数（）{
$（Input [type = file]）。点击（）$ b $（$＃$） b};

当然还有一个提交表单的例子在我的实际代码中，我使用了表单id）。

$ $ $ $（input [type = file]）。change（function （）{
$（this）.parent（）。submit（）;
}）;

当我点击mybutton时，预期的结果会发生，我的浏览窗口会打开，并让我从我的计算机上选择一个文件，而且当我在除IE以外的所有浏览器中更改文件时，onchange事件被触发。如果我取消隐藏表单并手动点击浏览按钮，并选择一个文件的onchange事件被触发，所以基本上浏览器对待点击实际的文件按钮不同于做一个$（input [type = file]）。 （）

任何人都知道如何解决这个问题？

好消息是有一种方法可以绕过IE的安全限制：

1. 创建链接到文件输入的常规标签标签。标签将像通常那样触发输入文件。


2. 使用CSS将标签伪装成按钮。
   
3. 必须显示文件输入为IE8），但可以隐藏使用知名度：隐藏。 IE8会接受这个黑客。

I had a post here:

.change acting weird in IE9

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.

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:

$("#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).

$("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()

anyone know how to fix this?

解决方案

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.

The good news is that there is a way to bypass the security restriction from IE using a label :

1. Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
2. Disguise the label as a button using CSS.
3. The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.

这篇关于IE9文件输入触发使用Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！