Jquery: change event to input file on IE

Question

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

Answer 1

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.

Answer 2

Look at these fiddle 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')
});

it works for all browsers, tested.

Answer 3

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

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

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

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