IE9 file input triggering using Javascript

Question

I had a post here:

.change acting weird in IE9

However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.

My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.

I have a file input

<input type="file" name="abc"/>

now I've done 2 things.

I've hidden the input and created a button (for better styling control) that activates the input.

<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>

and then the JS for the interaction between the two:

$("#mybutton").click(function() {
    $("Input[type=file]").click()
};

and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).

$("input[type=file]").change(function() {
  $(this).parent().submit();
});

When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()

anyone know how to fix this?

Answer 1

As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.

The good news is that there is a way to bypass the security restriction from IE using a label :

1. Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
2. Disguise the label as a button using CSS.
3. The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.