javascript - Internet Explorer file input onchange - Stack Overflow

admin管理员组

文章数量:1390784

I have these dynamically created file input HTML elements which are used with a jQuery-ajax file upload plug-in.

I would like the file upload to start after the input value has been updated. However, Internet Explorer seems to ignore the Javascript onChange.

How can I achieve this in IE?

Example:

var html = $('<div class="add_input">'+
        '<input type="file" name="file"/></div>').change(submit);

$('#add_inputs').prepend(html);

I have these dynamically created file input HTML elements which are used with a jQuery-ajax file upload plug-in.

I would like the file upload to start after the input value has been updated. However, Internet Explorer seems to ignore the Javascript onChange.

How can I achieve this in IE?

Example:

var html = $('<div class="add_input">'+
        '<input type="file" name="file"/></div>').change(submit);

$('#add_inputs').prepend(html);

• javascript
• jquery
• internet-explorer
• events
• onchange

Share Improve this question Follow edited Oct 20, 2012 at 19:01 mjc asked Nov 23, 2009 at 0:46 mjcmjc 3,43633 gold badges3737 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could just replace the above with something along these lines

var html = $('<div class="add_input"><input type="file" name="file"/></div>');
$('#add_inputs').prepend(html);
$("div.add_input > input[name='file']").change(submit);

or

var html = $('<div class="add_input"><input id="filer" type="file" name="file"/></div>');
$('#add_inputs').prepend(html);
$("#filer").change(submit);

When you create elements from HTML in jQuery, the returned handle references the outermost element(s), so you're putting the change event handler on the <div>, not the <input>.

This works nonetheless in most browsers because in the DOM Level 2 Events specification, the change event ‘bubbles’ up the document to inform its parents when it changes, so an event handler on <div> will get informed of any changes on any of its child <input>s. However IE has its own event model in which change does not bubble.

An alternative:

($('<input type="file" name="file" />')
    .change(submit)
    .prependTo('#add_inputs')
    .wrap('<div class="add_input"></div>')
);

本文标签： javascriptInternet Explorer file input onchangeStack Overflow