使用 Javascript 上传文件将风格化 <input type='file' > 的“拒绝访问”错误返回到按钮
Posted
技术标签:
【中文标题】使用 Javascript 上传文件将风格化 <input type=\'file\' > 的“拒绝访问”错误返回到按钮【英文标题】：File Upload Using Javascript returns 'Access Denied' Error With Stylized <input type='file' > to a button使用 Javascript 上传文件将风格化 <input type='file' > 的“拒绝访问”错误返回到按钮 【发布时间】：2013-01-11 16:17:05 【问题描述】：我已使用以下方式对“我的文件”输入进行了风格化：
<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>
问题是 .submit() 函数在 IE 上返回“拒绝访问”错误（在 IE8 和 9 中测试）。在所有其他浏览器（chrome、opera、safari 和 Firefox）中都能正常工作。当 sub(obj) 被调用时。即使我也使用 Jquery，也会发生同样的情况。
那么谁能告诉我应该如何让这个脚本在 IE 上运行？
【问题讨论】：
如果 CSS 不相关，您可以将其删除。 （删除多余的内容有助于人们关注问题。） 【参考方案1】：如上所述，IE 不允许您通过 javascript 打开对话框并代表用户提交文件。话虽如此，您对“文件输入”进行样式设置的想法是完全有效的。
此链接可能会对您有所帮助：
Styling File Inputs
至少可以说这是一个错误的工作，但一般要点是：
-
创建文件输入并使用 css 将不透明度设置为 0.0。不要设置
可见性，因为这将禁用输入。
使用 CSS 为您喜欢的常规文本输入设置样式，使其看起来像您想要的文件输入。
定位文本输入并添加 z-index 为 0。
定位您的文件输入（完全透明）并将其 z-index 设为 1。
编写javascript来提取文件输入的值（即在jQuery中
$('input[type="file"]').val();
并将其放在文本输入中。
这里的想法是文件输入仍在拉动文件，而用户仍在选择文件。从某种意义上说，你是在掩盖它并让它看起来好像你有一个自定义控件。真的，你的假控制在真正透明的背后。
希望对你有帮助
【讨论】：
【参考方案2】：这永远不会奏效。 IE 不允许您通过 javascript 调用“选择文件”对话框并通过 javascript 提交关联的表单。如您所见，如果您尝试这样做，IE 将在表单提交时抛出错误。您必须允许用户自己单击输入元素。
【讨论】：
它在 IE10 上工作，不是 8 也不是 9。我无法在 IE11 上测试它。 也适用于 IE11。以上是关于使用 Javascript 上传文件将风格化 <input type='file' > 的“拒绝访问”错误返回到按钮的主要内容，如果未能解决你的问题，请参考以下文章
无法将音频文件上传到 Cloudinary API（使用 javascript）
无法使用 xampp 在 localhost 中加载 javascript 文件