使用 Javascript 的文件上传将“拒绝访问”错误与风格化 <input type='file'> 返回到按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14560121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File Upload Using Javascript returns 'Access Denied' Error With Stylized <input type='file' > to a button
提问by Vedant Terkar
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.
问题是 .submit() 函数在 IE 上返回“拒绝访问”错误（在 IE8 和 9 中测试）。在所有其他浏览器（chrome、opera、safari 和 Firefox）中都能正常工作。当 sub(obj) 被调用时。即使我也使用 Jquery，也会发生同样的情况。
So Can any one tell me how should i get this script working on IE ?
那么谁能告诉我如何让这个脚本在 IE 上工作？
采纳答案by War10ck
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.
如上所述，IE 不允许您打开对话框并通过 javascript 代表用户提交文件。话虽如此，您对“文件输入”样式的想法是完全有效的。
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.
- 创建一个文件输入并使用 css 将不透明度设置为 0.0。不要设置可见性，因为这将禁用输入。
- 使用 CSS 根据您的喜好设置常规文本输入的样式，使其看起来像您想要的文件输入。
- 定位文本输入并添加 z-index 为 0。
- 定位您的文件输入（完全透明）并将其 z-index 设置为 1。
编写 javascript 来拉取文件输入的值（即在 jQuery 中）
$('input[type="file"]').val();并将其放在文本输入中。
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
希望这可以帮助
回答by Ray Nicholus
This will never work. IE does not allow you to invoke the "choose file" dialog via javascript AND submit the associated form via javascript. If you attempt this, as you have seen, IE will throw an error on form submission. You must allow the user to click the input element themselves.
这永远不会奏效。IE 不允许您通过 javascript 调用“选择文件”对话框并通过 javascript 提交关联的表单。如果您尝试这样做，正如您所见，IE 将在提交表单时抛出错误。您必须允许用户自己单击输入元素。
