File Upload Using Javascript returns 'Access Denied' Error With Stylized <input type='file' > to a button
As noted above IE does not allow you to open the dialog and submit a file on the user's behalf through javascript. That being said, your idea of styling the "file input" is completely valid.
This link may help you with that:
It's a buggy work around to say the least but the general gist is this:
- Create a file input and set the opacity using css to 0.0. Do not set visibility as this will disable the input.
- Style a regular text input to your liking using CSS so that it looks like the file input you desire.
- Position the text input and add a z-index of 0.
- Position your file input (that is completely transparent) and give it z-index of 1.
-
Write javascript to pull the value of the file input (i.e. in jQuery
$('input[type="file"]').val();
and place it in the text input.
The idea here is that the file input is still pulling the file and the user is still choosing the file. You're in a sense, masking it and making it appear as if you have a custom control. Really, your fake control is behind the real one which is simply transparent.
Hope this helps
Vedant Terkar
Unsung hero, they say... I'm from: India A Proud Indian in the USA Helping the world full of Programmers! Together We Grow :).
Updated on June 05, 2022Comments
-
Vedant Terkar almost 2 years
I have stylized My File input using :
<html> <head> <style> #yourBtn{ position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; border-radius: 5px; border: 1px dashed #ddeeff; text-align: center; background-color: #ffddee; cursor:pointer; color:#333333; } </style> <script type="text/javascript"> function getFile(){ document.getElementById("upfile").click(); } function sub(obj){ document.getElementById("yourBtn").innerHTML = "Uploading Please Wait..."; document.myForm.submit(); event.preventDefault(); } </script> </head> <body> <center> <form action="/sub/upload.php" method="POST" enctype="multipart/form-data" name="myForm" target="myiframe"> <div id="yourBtn" onclick="getFile()">click to upload a file</div> <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" name="upload" style="display:none;" onchange="sub(this)" /></div> </form> <iframe name="myiframe" style="width:100;height:100;border:2px solid #bbccdd;"></iframe> </center> </body> </html>
The Problem is .submit() function returns the ' Access Denied ' error on IE (tested in IE8 and 9). Works fine in all other browsers (chrome,opera,safari and Firefox). when the sub(obj) is invoked. And The same is happening even if i use Jquery also.
So Can any one tell me how should i get this script working on IE ?
-
tmorell over 10 yearsIt does work on IE10, not 8 nor 9. I am not able to test it on IE11.
-
PahJoker over 10 yearsWorks on IE11 as well.