使用Javascript进行文件上传会将带有样式化<input type ='file'>的"拒绝访问"错误返回到按钮

Ved*_*kar 6 javascript css iframe jquery file-upload

我使用以下程序化了My ​​File输入:

<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>
Run Code Online (Sandbox Code Playgroud)

问题是.submit()函数返回IE上的"拒绝访问"错误(在IE8和9中测试).适用于所有其他浏览器(chrome,opera,safari和Firefox).当调用sub(obj)时.即使我也使用Jquery,也会发生同样的事情.

所以任何人都可以告诉我如何让这个脚本在IE上运行?

War*_*0ck 5

如上所述,IE不允许您打开对话框并代表用户通过javascript提交文件.话虽这么说,你设计"文件输入"的想法是完全有效的.

这个链接可以帮助你:

样式文件输入

至少可以说这是一个错误的工作,但一般的要点是这样的:

  1. 创建文件输入并使用css将不透明度设置为0.0.不要设置可见性,因为这将禁用输入.
  2. 使用CSS为您喜欢的常规文本输入设置样式,使其看起来像您想要的文件输入.
  3. 定位文本输入并添加z-index为0.
  4. 定位文件输入(完全透明)并将其z-index设为1.
  5. 编写javascript来拉取文件输入的值(即在jQuery中

    $('input[type="file"]').val();
    
    Run Code Online (Sandbox Code Playgroud)

    并将其放在文本输入中.

这里的想法是文件输入仍在拉动文件,用户仍在选择文件.你在某种意义上,掩盖它并使它看起来好像你有一个自定义控件.真的,你的虚假控制背后是真正的控制,它只是透明的.

希望这可以帮助