[点晴永久免费OA]IE 下JS上传文件时出现“拒绝访问”的解决方案

当前位置：点晴教程→点晴OA办公管理信息系统 →『经验分享&问题答疑』

admin

2019年3月25日 21:53 本文热度 2762

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

比如在IE下：

在chorme中：

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

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

html代码：

<div>

</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>

Browse<input type="file" name="artworkFile" id="artworkFile" class="file" onchange="change(this)" value="浏览" />

</a>

</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;

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:只展示了部分关键代码，详细的样式需要自己慢慢调整才可以。

该文章在 2019/3/25 21:53:05 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。