jquery / Javascript - initiating file input to get around IE bug
I have a file button (for uploading an image).
I want to use an image to fire the 'file' selection. I have crated an image in a <label> tag and used 'for' to enable the <label> (and therefor the image) to fire the 'file' dialogue.
The example shows my test code (apologies for the inline styling).
However there is a bug in IE that stops this working when you put the code inside a <form> tag. So firing manually using javascript/Jquery would seem to be a solution.
From my research there seems to be limitation with some browsers stopping the programmatic firing of a 'file' input, as this is deemed a potential security risk.
Does anyone have a solution that will allow me to get round this and allow the firing of a 'file' input when an image is clicked that will be cross browser compatible?
Regards
I want to use an image to fire the 'file' selection. I have crated an image in a <label> tag and used 'for' to enable the <label> (and therefor the image) to fire the 'file' dialogue.
<label for = "userfile" style = "cursor: hand;cursor: pointer;">
<input style = "display:none;" name="userfile" id="userfile" type="file" />
<img src="<%=v_image%>">
</label>The example shows my test code (apologies for the inline styling).
However there is a bug in IE that stops this working when you put the code inside a <form> tag. So firing manually using javascript/Jquery would seem to be a solution.
From my research there seems to be limitation with some browsers stopping the programmatic firing of a 'file' input, as this is deemed a potential security risk.
Does anyone have a solution that will allow me to get round this and allow the firing of a 'file' input when an image is clicked that will be cross browser compatible?
Regards
How about something like this:
<input type="file" id="userfile" name="userfile" style="visibility: hidden; width: 1px; height: 1px" >
<a href="" onclick="document.getEleme
<input type="file" id="userfile" name="userfile" style="visibility: hidden; width: 1px; height: 1px" >
<a href="" onclick="document.getEleme
Something like this maybe
http://jsfiddle.net/GaryC123/tuJ27/3/
Fixed for FORM
http://jsfiddle.net/tuJ27/8/
http://jsfiddle.net/GaryC123/tuJ27/3/
Fixed for FORM
http://jsfiddle.net/tuJ27/8/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
They use an iframe to do exactly this.