我使用以下方法对“我的文件”输入进行了风格化：
<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 上运行呢？
如上所述，IE 不允许您通过 JavaScript 打开对话框并代表用户提交文件。话虽如此，您对“文件输入”进行样式设计的想法是完全有效的。
此链接可能会帮助您：
设置文件输入的样式
至少可以说这是一个有缺陷的解决方案，但总体要点是：
- 创建一个文件输入并使用 css 将不透明度设置为 0.0。不设置
可见性，因为这将禁用输入。
- 使用 CSS 根据您的喜好设置常规文本输入的样式，使其看起来像您想要的文件输入。
- 定位文本输入并添加 z 索引 0。
- 定位文件输入（完全透明）并将 z-index 设置为 1。
-
编写 javascript 来提取文件输入的值（即在 jQuery 中
$('input[type="file"]').val();
并将其放入文本输入中。
这里的想法是文件输入仍在拉取文件并且用户仍在选择文件。从某种意义上说，您掩盖了它并使其看起来好像您有一个自定义控件。确实，你的假控制位于真实控制的后面，而真实控制是透明的。
希望这可以帮助
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
