javascript - Dynamically submitting a file upload form in IE10 using jQuery -

i have form purpose upload files, user experience reasons, need nice-looking button that:

1. loads file dialog
2. auto-submits form when file has been selected

the original solution this jsfiddle, have link loads file dialog, listens dialog's change event auto-submit form:

$("input[type=file]").on("change", function () {     // auto-submit form     $("form").submit(); });  $("#my-nice-looking-button").on("click", function (e) {     e.preventdefault();     // load file dialog     $("input[type=file]").trigger("click"); }); 

if try fiddle, work in ie9, chrome, firefox, etc., doesn't work in internet explorer 10. javascript functionality works, including form's submit event getting fired. but, browser never posts form data server; sits there.

is there security safeguard or file upload limitation built ie10 prevents working?

as turns out, yes, ie10 not let both programmatically load file dialog and automatically submit form after change event on file dialog. presumably 1 or other work, not both. haven't found documentation support claim other own experimentation.

the solution found use css style file dialog's button such invisible, laid on top of nice-looking button, when think you're clicking on button, you're clicking on file dialog's "select" button:

input[type=file] {     /* positioning strategies vary depending on design */     font-size: 25px;     position: relative;     top: -50px;     left: -10px;      /* make invisible! */     opacity: 0;      /* make cursor act it's hovering on anchor tag */     cursor: pointer;     cursor: hand; } 

then need listen change event , submit form before:

$("input[type=file]").on("change", function () {     // auto-submit form     $("form").submit(); }); 

doing means "organically" loading file dialog, , ie10 lets happen , allows auto-submit form.

this solution works in webkit , firefox.