IE 下JS上传文件时出现“拒绝访问”的解决方案

很多时候，VS 自带的input[file]控件不能满足我们的要求。而且在不同浏览器中的样式有些许不一致。

比如在IE下：



在chorme中：



所以有时候需要我们自定义file的样式。一般都是通过将file隐藏，来达到我们需要的效果。

定义一个按钮，一个file,以及一个文本框。点击按钮，调用file的click事件，并将选中的文件名称显示在文本框中。但这种方式不兼容IE。

html代码:

<div>
<input type="text" id="txtFile" />
<input type="file" hidden="hidden" id="file" onchange="change(this)"/>
<input type="button" value="Browse" id="btn" onclick="btnClick()"/>
</div>

js代码：

function btnClick()
{
$("#file").click();//调用click的点击事件
}

function change(control) {
$("txtFile").val($(this).val());
}

运行效果：



这样基本就能达到我们想要的效果了。但是有一个问题就是：在IE下，我们通过Js提交表单时，会出现“拒绝访问”的错误。错误原因 : IE下 file表单控件，不能用js控制打开文件选择器，必须要手动点击才可以，否则会报 “拒绝访问”。

即:不能通过js直接调用file的click事件。只能通过点击触发file的change事件。

解决方案：将file控件隐藏在a标签之下。点击a标签时，直接触发file的change事件

demo:

<div>
<input id="photoCover" class="input-large" value="" type="text" style="width:200px" readonly="readonly">
<a href="#" class="excelbutton">
Browse<input type="file" name="artworkFile" id="artworkFile" class="file" onchange="change(this)" value="浏览" />
</a>
<input type="button" class="btn" style="height:20px;width:55px;" value="New" onclick="artworkNewItem(this)" />
</div>

样式：

.excelbutton {
/*background-color: #1570a6;
color: #fff;*/
width: 50px;
height: 30px;
position: relative;
overflow: hidden;
text-align: center;
padding-top: 2px;
padding-left: 4px;
padding-right: 6px;
padding-bottom: 2px;
font-size: 12px;
margin-left:4px;
cursor: pointer;
color: #fff;
font-size: 11px;
background-color: #1570A6;
border: #FFFFFF 1px solid;
}

.excelbutton:hover {
background-color: #136494;
}

.file {
position: absolute;
right: 0;
top: 0;
width: 50px;
opacity: 0;
filter: alpha(opacity=0);
height: 20px;
cursor: pointer;
}

这样就能达到上图一致的效果了。

PS:只展示了部分关键代码，详细的样式需要自己慢慢调整才可以。