I have a problem where my form works in all browsers, except for IE.
I have reduced the problem to the smallest that still have the problem.
I have created a test html file that looks like this:
<html>
<body>
<form id="myform" action="/" method="post" enctype="multipart/form-data">
<input id="fileToUpload" type="file" size="10" name="fileToUpload" />
<input id="mysubmit" type="submit" value="submit"/>
</form>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$( function(){
*$("#mysubmit").click(function(){
*$("#fileToUpload").click();
*});
});
</script>
</body>
</html>
What I’m trying to do here is to have the submit button first open the file selection box, and then submit the form. The reason is that i want to hide the file selector so the user can click the button, select the file from the dialog, and then get the form posted back immediately.
In “real life” it’s a bit more complicated, since Firefox and Chrome does not wait for the file selection dialog to close before continuing the script after $("#fileToUpload").click();, and Internet explorer waits till it’s closed before continuing. But those things I can manage to handle.
But in this case, IE does not perform the postback of the form at all. If I remove the lines prefixed with star above, IE will also post it back. I also tried putting a $("#myform").submit(); at the end there, but I had no luck with that either. No postback.
Anyone have any clue how to solve this?
I think its not possible, I played around with it here: http://jsfiddle.net/K35tB/5/ Also using timers to check if the fileToUpload contains something and later try to trigger the postback. Whats happend is that I get the message “Access deny” If I do the postback after the FileToUload have been trigged. If I perform the postback before, its works. So its related in some way.
But of course this code work
I was playing with IE 8.0.7
If you check the Fiddle example and modify it and run the timer version you will see that the path is visible for a secound, and when we perform the Submit it disappers.
Maybe you should try do doing the same using http://swfupload.org/ or some other component. If its not a requirment in your project to use pure HTML controls. Hope it helped in someway!
Edit 1:
I tried some more examples, and it works correct if you put the fileToUpload outside the form tag. So it incresse my thoughts that is some kind of security thing. I also tried to put the fileToUpload outside the form, and just before postback modifying the DOM and insert it into the form. Same result, access denied…