Javascript Jquery：将事件更改为 IE 上的输入文件

Jquery: change event to input file on IE

提问by cmedeiros

I have a form to upload files, and it should fire the submit after the file selection.

我有一个上传文件的表单，它应该在文件选择后触发提交。

On FireFox/Chrome it goes well, and submits the form after file selection, but I can't do this on Internet Explorer.

在 FireFox/Chrome 上运行良好，并在选择文件后提交表单，但我无法在 Internet Explorer 上执行此操作。

Already tried with click/propertychange but nothing happens. Some code I already tried:

已经尝试使用 click/propertychange 但没有任何反应。我已经尝试过的一些代码：

$("#attach").attr("onChange", "alert('I changed')");

$("#attach").live($.browser.msie? 'propertychange': 'change', function(e) { ... });

This input file is created on the fly; because of it I use .live()to bind the event.

这个输入文件是动态创建的；因为它我.live()用来绑定事件。

Any suggestions?

有什么建议？

回答by issa marie tseng

I know this is several months late, but I just ran into the exact same behavior in IE7; in all other browsers, the change event for file inputs happens after file selection. In IE7, it happens only if you trigger the file select again, or on blur.

我知道这已经晚了几个月，但我在 IE7 中遇到了完全相同的行为；在所有其他浏览器中，文件输入的更改事件发生在文件选择之后。在 IE7 中，仅当您再次触发文件选择或模糊时才会发生这种情况。

Here's how I ended up fixing it:

这是我最终修复它的方式：

var $input = $('#your-file-input-element');

var someFunction = function()
{
    // what you actually want to do
};

if ($.browser.msie)
{
    // IE suspends timeouts until after the file dialog closes
    $input.click(function(event)
    {
        setTimeout(function()
        {
            if($input.val().length > 0) {
              someFunction();
            }
        }, 0);
    });
}
else
{
    // All other browsers behave
    $input.change(someFunction);
}

Technically you could/should filter the hack condition to just IE7, since IE8 behaves properly on the change event, but it also has the same behavior as IE7 on suspending timeouts while browser-related chrome is visible (I guess it considers it blocking I/O), so it works as-is.

从技术上讲，您可以/应该将 hack 条件过滤为仅 IE7，因为 IE8 在更改事件上的行为正确，但它也具有与 IE7 相同的行为，即在与浏览器相关的 chrome 可见时暂停超时（我猜它认为它阻止了 I/ O)，所以它按原样工作。

回答by djibouti33

This is really late, but I was having the same problem, and I solved it by using a styled <label>tag with a slight workaround for Firefox.

这真的很晚了，但我遇到了同样的问题，我通过使用<label>带有 Firefox 的轻微变通方法的样式标签解决了它。

http://jsfiddle.net/djibouti33/uP7A9/

http://jsfiddle.net/djibouti33/uP7A9/

The Goals:

目标：

1. allow user to upload a file by using standard html file input control
2. hide standard html file input control and apply own styling
3. after user selects file to upload, automatically submit the form

1. 允许用户使用标准 html 文件输入控件上传文件
2. 隐藏标准 html 文件输入控件并应用自己的样式
3. 用户选择要上传的文件后，自动提交表单

The Browsers:

浏览器：

• Firefox, Chrome, IE8/9, Safari
• IE7 didn't work, but it might if you add that browser to the workaround detailed at the bottom

• 火狐、Chrome、IE8/9、Safari
• IE7 不起作用，但如果您将该浏览器添加到底部详述的解决方法中，则可能

The Initial Solution:

最初的解决方案：

1. Hide the file input by positioning it offscreen. Important not to display:none as some browsers won't like this.
2. Add another styled element to the page (link, button).
3. Listen for a click on that element, then programmatically send a click to the file input to trigger the native 'file explorer'
4. Listen for the file input's onchange event (occurs after a user chooses their file)
5. Submit the form

1. 通过将其定位在屏幕外来隐藏文件输入。重要的是不要显示：无，因为有些浏览器不喜欢这样。
2. 向页面添加另一个样式元素（链接、按钮）。
3. 监听对该元素的点击，然后以编程方式向文件输入发送点击以触发本机“文件浏览器”
4. 监听文件输入的 onchange 事件（在用户选择文件后发生）
5. 提交表格

The Problem:

问题：

1. IE: if you programmatically send a click to a file input in order to activate it (2), programmatically submitting the form (5) will throw a security error

1. IE：如果您以编程方式向文件输入发送点击以激活它 (2)，以编程方式提交表单 (5) 将引发安全错误

The Workaround Solution:

变通解决方案：

1. Same as above
2. Take advantage of the accessibility features built in to the tag (clicking on a label will activate it's associated control) by styling a tag instead of a link/button
3. Listen for the file input's onchange event
4. Submit the form
5. For some reason Mozilla browsers won't activate a file input by clicking on it's .
6. For Mozilla, listen for the click on the label and send a click event to the file input to activate it.

1. 和上面一样
2. 通过设置标签而不是链接/按钮的样式，利用标签内置的辅助功能（单击标签将激活它的关联控件）
3. 监听文件输入的 onchange 事件
4. 提交表格
5. 出于某种原因，Mozilla 浏览器不会通过单击文件输入来激活它的 .
6. 对于 Mozilla，监听标签上的点击并向文件输入发送点击事件以激活它。

Hope this helps! Check out the jsfiddle for details on the html/js/css used to make it all work.

希望这可以帮助！查看 jsfiddle 有关用于使其全部工作的 html/js/css 的详细信息。

回答by Nick Craver

Format it like this:

像这样格式化：

$("#attach").change(function() { 
  alert('I Changed');
});

Update:After answering another questionon this earlier, we realized this was fixed as part of the jQuery 1.4.2 event re-write, just update to the latest version to resolve the changeevent issue with <input type="file" />in IE.

更新：在之前回答了另一个问题后，我们意识到这是作为jQuery 1.4.2 事件重写的一部分修复的，只需更新到最新版本即可解决IE 中的change事件问题<input type="file" />。

回答by Venkat D.

I used the following solution. I tried to make it as self-contained as possible.

我使用了以下解决方案。我试图让它尽可能独立。

(function($) {
    if ($.browser.msie == false)
        return;

    $('input[type=file]').live('click', function(e) {
        var self = this;
        var blur = function() {
            $(self).blur();
        }
        setTimeout(blur, 0);
    });

})(jQuery);

回答by Gelin Luo

I was having the same issue with IE (including IE 9). The UI logic is:

我在使用 IE（包括 IE 9）时遇到了同样的问题。界面逻辑是：

1. click on a divelement triggers the clickevent on a file-input-elementso that user click on a divtrigger file open dialog
2. bind the changeevent handler to the file-input-elementto ensure the formis submitted when file open dialog closed

1. 单击div元素触发click事件，file-input-element以便用户单击div触发文件打开对话框
2. 将change事件处理程序绑定到file-input-element以确保form在文件打开对话框关闭时提交

The app (running inside an iframe) works like a charm on Chrome and FF. But soon I found it doesn't work on IE as when user selected a file and close the dialog the form didn't submit.

该应用程序（在 iframe 内运行）就像 Chrome 和 FF 上的魅力一样。但很快我发现它在 IE 上不起作用，因为当用户选择一个文件并关闭表单没有提交的对话框时。

The final solution is to drop the logic #1 "click on divelement trigger clickevent on file input element" and let user to click on the file input elementdirectly, and then it works.

最终的解决方案是删除逻辑＃1“在文件输入元素上单击div元素触发click事件”，让用户file input element直接单击，然后它就可以工作了。

BTW, the reason we have a divelement is we want to hide the browser rendered controls because we have everything in the background image. However set displayto nonemakes the control not able to respond a user interaction event. So we move the file-input-elementto outside of the view port and use a divelement to replace it. Since this doesn't work on IE, we end up with move back the file-input-elementand set it's opacityto 0. On IE 8 or less which doesn't support opacity, we use filter to make it transparent:

顺便说一句，我们有一个div元素的原因是我们想要隐藏浏览器呈现的控件，因为我们在背景图像中拥有所有内容。但是设置display为none使控件无法响应用户交互事件。所以我们将 移到file-input-element视口之外并使用一个div元素来替换它。由于这在 IE 上不起作用，我们最终将其移回file-input-element并将其设置opacity为 0。在不支持 的 IE 8 或更低版本上opacity，我们使用过滤器使其透明：

#browse {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

回答by d-sauer

I found this solution In HTML hide file element (don't use display: none, won't work in IE), prepare onchange event of IE:

我在 HTML 隐藏文件元素中找到了这个解决方案（不要使用 display: none，在 IE 中不起作用），准备 IE 的 onchange 事件：

<div style="width: 0px; height: 0px; overflow: hidden;">
  <input id="ifile_template" type="file" onchange="this.focus(); this.blur();"/>
</div>

In javascript for IE bind function to blur, and for FF,CH bind function change():

在 javascript 中，IE 绑定函数模糊，而 FF，CH 绑定函数 change()：

$(iFile).blur(
  function () {
    ...some code...
  }
);

// FF, CH
$(iFile).change(
  function () {
  ...some code...
  }
);

回答by spig

This is likely a problem with a race conditionwith input fields in IE. By using setTimeout the function that is executed will then register that a change happened. When the UI code is performed in the onChangeEvent, that event hasn't fired yet as it appears to IE.

这可能是IE 中输入字段竞争条件的问题。通过使用 setTimeout，执行的函数将注册发生了更改。当在 onChangeEvent 中执行 UI 代码时，该事件尚未像 IE 显示的那样触发。

I solved a similar situation by doing the following inside my change handler:

我通过在我的更改处理程序中执行以下操作解决了类似的情况：

if (jQuery.browser.msie) { setTimeout(DoSomeUIChange, 0); } else { DoSomeUIChange(); }

The DoSomeUIChange is executed after the current code on the event queue and so removes the race condition.

DoSomeUIChange 在事件队列上的当前代码之后执行，因此消除了竞争条件。

回答by sorpigal

This has always worked for me in IE6 ad IE7.

这在 IE6 和 IE7 中一直对我有用。

$('#id-of-input-type-file').change(function(){});

回答by setty

In IE onchange event works fine when it filled out in html tag directly. Like:

在 IE onchange 事件中，当它直接在 html 标签中填写时工作正常。喜欢：

<input type="file" onchange="uploader.upload()" />

回答by victorm1710

For IE You can use the "onfocus" event to catch the change of uploading file. Once the file browsing dialog is closed the onfocus event is triggered. You can check this by adding this line to your page:

对于 IE，您可以使用“onfocus”事件来捕捉上传文件的变化。一旦文件浏览对话框关闭，就会触发 onfocus 事件。您可以通过将此行添加到您的页面来检查这一点：

<input type="file" onfocus="javascript:alert('test');" />

<input type="file" onfocus="javascript:alert('test');" />

Once the dialog is closed the alert message is shown.

关闭对话框后，将显示警报消息。

This solution is only for IE, not for FF or Chrome.

此解决方案仅适用于 IE，不适用于 FF 或 Chrome。