Jquery:将事件更改为输入文件。

I already looked all around, and can't find a solution: I have a form to upload files, and it should fire the submit after the file selection.

我已经找遍了，找不到解决方案:我有一个上传文件的表单，在选择文件后应该会触发提交。

On FF/Chrome it goes weel, and submit the form after file selection, but I can't do this on ie.

在FF/Chrome上它会变软，然后在文件选择之后提交表单，但是我不能在ie上这样做。

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

已经尝试了单击/propertychange，但是什么都没有发生。一些我已经尝试过的代码:

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

$(" #连接”)。attr(“onChange”、“警报(“我”)”);

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

$(" #附加”).live(.browser.msie美元?'propertychange': 'change'， function(e){…});

Any sugestions to I try?

我有什么建议吗?

Edit1: I think there's a important information, this input file, is created on the fly, because of it I use .live() to bind the event

Edit1:我认为有一个重要的信息，这个输入文件，是在飞行中创建的，因为我使用.live()来绑定事件。

15 个解决方案

#1

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中，只有当您再次触发文件选择或使用blur选项时，才会发生这种情况。

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)，所以它是按原样运行的。

#2

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.

这确实很晚了，但是我遇到了同样的问题，我使用了一个样式为的标签，并对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. 允许用户通过使用标准的html文件输入控件上传文件
3. hide standard html file input control and apply own styling
4. 隐藏标准html文件输入控件并应用自己的样式。
5. after user selects file to upload, automatically submit the form
6. 用户选择文件上传后，自动提交表单

The Browsers:

浏览器:

• Firefox, Chrome, IE8/9, Safari
• 火狐,Chrome,IE8/9,Safari
• IE7 didn't work, but it might if you add that browser to the workaround detailed at the bottom
• 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. 将文件输入隐藏在屏幕外。重要的是不要显示:没有一个浏览器不喜欢这个。
3. Add another styled element to the page (link, button).
4. 在页面中添加另一个样式元素(链接，按钮)。
5. Listen for a click on that element, then programmatically send a click to the file input to trigger the native 'file explorer'
6. 侦听对该元素的单击，然后以编程方式向文件输入发送单击以触发本机“file explorer”
7. Listen for the file input's onchange event (occurs after a user chooses their file)
8. 侦听文件输入的onchange事件(在用户选择其文件之后发生)
9. Submit the form
10. 提交表单

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
2. IE:如果你以编程方式发送一个点击到文件输入以激活它(2)，以编程方式提交表单(5)将抛出一个安全错误

The Workaround Solution:

解决方案的解决方案:

1. Same as above
2. 同上
3. 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
4. 利用标签内建的可访问性特性(单击标签将激活它的关联控件)，通过样式化标签而不是链接/按钮
5. Listen for the file input's onchange event
6. 监听文件输入的onchange事件
7. Submit the form
8. 提交表单
9. For some reason Mozilla browsers won't activate a file input by clicking on it's .
10. 出于某种原因，Mozilla浏览器不会通过点击文件的内容来激活文件输入。
11. For Mozilla, listen for the click on the label and send a click event to the file input to activate it.
12. 对于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的详细信息。

#3

Format it like this:

这样的格式:

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

Update: After answering another question on 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 change event issue with <input type="file" /> in IE.

更新:在回答了前面的另一个问题后，我们意识到这是jQuery 1.4.2事件重写的一部分，只需更新到最新版本，以解决IE中的更改事件问题。

#4

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

#5

This has always worked for me in IE6 ad IE7.

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

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

#6

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

我和IE也有同样的问题(包括ie9)， UI逻辑是:

1. click on a div element triggers the click event on a file-input-element so that user click on a div trigger file open dialog
2. 单击一个div元素会在文件输入元素上触发单击事件，以便用户单击div触发文件打开对话框。
3. bind the change event handler to the file-input-element to ensure the form is submitted when file open dialog closed
4. 将更改事件处理程序绑定到file-input-element，以确保在文件打开对话框关闭时提交表单

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 div element trigger click event on file input element" and let user to click on the file input element directly, and then it works.

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

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

顺便说一句，我们有div元素的原因是我们想要隐藏浏览器渲染控件，因为我们在背景图像中有所有东西。但是设置为none会使控件无法响应用户交互事件。因此，我们将file-input-element移到视图端口之外，并使用div元素替换它。由于这对IE不起作用，我们最终将文件-输入-元素移动回来，并将它的不透明度设置为0。在不支持不透明的ie8或以下版本中，我们使用过滤器使其透明:

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

#7

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 hide文件元素中找到了这个解决方案(不使用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...
  }
);

#8

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

在IE onchange事件中，当它在html标签中直接填写时，效果很好。如:

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

#9

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 "聚焦事件= " javascript:警报(“测试”);”/ >

Once the dialog is closed the alert message is shown.

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

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

这个解决方案只适用于IE，而不是FF或Chrome。

#10

My solution:

我的解决方案:

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

Not pretty, but it works. ;D

虽然不漂亮，但很管用。D;

#11

This is likely a problem with a race condition with 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在事件队列上的当前代码之后执行，因此删除竞争条件。

#12

I can confirm, at least that it only works after a blur event takes place, similar to a radio and checkbox in IE. I am probably going to have to add some kind of visual element for the user to click and tell me when they have picked their file.

我可以确认，至少只有在发生模糊事件后，它才会工作，类似于IE中的收音机和复选框。我可能需要添加一些视觉元素来让用户点击并告诉我他们什么时候选择了他们的文件。

lame.

站不住脚的。

#13

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

It works in IE, but if you want to emulate "live" behavior, you should add "onChange" attribute to each new element when create its.

它在IE中工作，但是如果您想要模拟“实时”行为，您应该在创建它的时候向每个新元素添加“onChange”属性。

#14

jQuery doesn't seem to recognise the propertychange event. I added it to the DOM node using IE's attachEvent().

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

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

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

#15

Look at these fiddle http://jsfiddle.net/uP7A9/531/

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

HTML:

HTML:

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

jQuery:

jQuery:

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

it works for all browsers, tested.

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