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?

Improve this question

3 Answers 3

Reset to default
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.
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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!
IMHO this should have been the answer!
This is the answer to all file upload restrictions in IE !!!! You deserve more upvote
sorry, haven't curated my old questions in awhile. changing this to the answer as it is more comprehensive :D
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.

Improve this answer

2 Comments

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...
I guess you can use flash as well! I think this is what most people like Gmail ... are using.
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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.