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. 通过将文件输出放在屏幕外来隐藏文件输入。重要的是不要显示：none，因为有些浏览器不喜欢这个。
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的一部分，只需更新到最新版本即可解决{{1} IE中change的事件问题。

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中带有输入字段的problem with a race condition。通过使用setTimeout，执行的函数将注册发生了更改。当在onChangeEvent中执行UI代码时，该事件尚未在IE中显示。

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

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

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

Answer 7

我遇到了与IE相同的问题（包括IE 9）。 UI逻辑是：

1. 点击div元素会触发click上的file-input-element事件，以便用户点击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 8

我找到了这个解决方案 在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 for IE绑定函数模糊，而对于FF，CH绑定函数change（）：

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

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

Answer 9

在IE onchange事件中直接填写html标签时工作正常。像：

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

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

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