Organizational Research By

Surprising Reserch Topic

jquery change event to input file on ie

jquery change event to input file on ie  using -'javascript,jquery,internet-explorer,events'

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.

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

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

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

asked Sep 14, 2015 by ChaFoxall
0 votes

Related Hot Questions

11 Answers

0 votes

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.

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
            if($input.val().length > 0) {
        }, 0);
    // All other browsers behave

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.

answered Sep 14, 2015 by FreemanRaead
0 votes

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 in IE.

answered Sep 14, 2015 by Iowlsjfx
0 votes

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

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

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

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

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

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.

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

answered Sep 14, 2015 by ReiSantacru
0 votes

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

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

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

answered Sep 14, 2015 by JannetteRich
0 votes

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

  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. bind the change event handler to the file-input-element to ensure the form is submitted when file open dialog closed

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.

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.

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:

#browse {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
answered Sep 14, 2015 by ErnStarke
0 votes

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

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

  function () {
    ...some code...

// FF, CH
  function () {
  ...some code...
answered Sep 14, 2015 by EltonBalasl
0 votes

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:

Once the dialog is closed the alert message is shown.

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

answered Sep 14, 2015 by KristeenWola
0 votes

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.

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.

answered Sep 14, 2015 by ChadMcCaffer
0 votes

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.


answered Sep 14, 2015 by AleBinder
0 votes
$("#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.

answered Sep 14, 2015 by ClaudioStand
0 votes

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

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

var $input = $(/* your file input */);
$input[0].attachEvent('onpropertychange', function() { 
answered Sep 14, 2015 by Geri89Zckgge