Home/ Questions/Q 9217269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:35:59+00:00

I have stylized My File input using : <html> <head> <style> #yourBtn{ position: relative;

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    Styling File Inputs

    It’s a buggy work around to say the least but the general gist is this:

    1. Create a file input and set the opacity using css to 0.0. Do not set
      visibility as this will disable the input.
    2. Style a regular text input to your liking using CSS so that it looks like the file input you desire.
    3. Position the text input and add a z-index of 0.
    4. Position your file input (that is completely transparent) and give it z-index of 1.

    5. 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

    • 0