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

Question

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

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

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

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

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

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

有什么建议吗？

Answer 1

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

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

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);
}

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

Answer 2

这真的很晚了，但我遇到了同样的问题，我通过使用样式化的<label> 标记解决了这个问题，并为 Firefox 提供了一些解决方法。

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

目标：

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

浏览器：

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

初步解决方案：

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

问题：

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

变通解决方案：

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

希望这会有所帮助！查看 jsfiddle 以了解有关用于使其正常工作的 html/js/css 的详细信息。

Answer 3

格式如下：

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

更新：在早些时候回答another question 之后，我们意识到这是jQuery 1.4.2 event re-write 的一部分，只需更新到最新版本即可解决change 事件问题@ 987654325@在IE中。

Answer 4

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

(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);

Answer 5

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

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

Answer 6

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

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

Answer 7

这可能是一个problem with a race condition，在 IE 中带有输入字段。通过使用 setTimeout，执行的函数将记录发生的更改。在 onChangeEvent 中执行 UI 代码时，该事件尚未触发，因为它在 IE 中显示。

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

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

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

Answer 8

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

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

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

最终的解决方案是把逻辑#1“点击div元素触发click文件输入元素上的事件”，让用户直接点击file input element，然后它就起作用了。

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

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

Answer 9

我找到了这个解决方案 在 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>

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

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

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

Answer 10

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

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

一旦对话框关闭，就会显示警告消息。

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

Answer 11

我的解决方案：

setInterval(function()
{
    if ($.browser.msie) $("input[type=file]").blur();
},500);

不漂亮，但它有效。 ;D

Answer 12

我可以确认，至少它只在发生模糊事件后才有效，类似于 IE 中的单选框和复选框。我可能必须添加某种视觉元素，以便用户单击并告诉我他们何时选择了文件。

跛脚。

Answer 13

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

它在 IE 中有效，但如果你想模拟“实时”行为，则应在创建每个新元素时为其添加“onChange”属性。

Answer 14

jQuery 似乎无法识别propertychange 事件。我使用 IE 的 attachEvent() 将它添加到 DOM 节点。

var userChoseFile = function($input) {
    // ...
}

var $input = $(/* your file input */);
$input[0].attachEvent('onpropertychange', function() { 
    userChoseFile($input);
});

Answer 15

看看这些小提琴http://jsfiddle.net/uP7A9/531/

HTML：

<input type="file" name="PicturePath" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />

jQuery:

$("input[type=file]#fileUpload").on("change", function () {
    alert('hi')
});

它适用于所有浏览器，经过测试。