7

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?

Community
  • 1
  • 1
Brodie
  • 8,399
  • 8
  • 35
  • 55

3 Answers3

33

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.
Alex Clement
  • 456
  • 5
  • 5
  • 1
    Man this works fine, it is what I was looking for! I´ve tryed a lot of other methods in IE 9 but only this worked! – Daniel Oct 23 '13 at 13:52
  • IMHO this should have been the answer! –  May 14 '14 at 22:22
  • This is the answer to all file upload restrictions in IE !!!! You deserve more upvote – Warface Jul 30 '14 at 14:56
  • sorry, haven't curated my old questions in awhile. changing this to the answer as it is more comprehensive :D – Brodie May 06 '15 at 16:35
2

If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.

Ali
  • 18,665
  • 21
  • 103
  • 138
  • 1
    ah ic... well a solution that I've seen is to take the input field and style it to the size fo the faux button and hide it above the button (so a user thinks they're clicking a button but they're really clicking the form). It's just verrrrry ugly and a lot of unhappy CSS to deal with... – Brodie Jan 12 '12 at 16:35
  • I guess you can use flash as well! I think this is what most people like Gmail ... are using. – Ali Jan 12 '12 at 16:42
0

  1. make sure your code is in $("document").ready(function(){... here..});

  2. seems file inputs when wired up with .live("change", function(){}); dont quite work well

the other styling stuff is something else but the CSS isn't all that complicated - beautiful file upload

bizl
  • 1,535
  • 2
  • 12
  • 21