最近遇到一个比较奇葩的问题,某些ie浏览器在页面中上传文件时,无法上传。查看控制台报错: SCRIPT5: 拒绝访问。 jquery-3.2.1.min.js, 行4 字符5725 。并且我的最新版IE11无此问题,开发者控制台调为IE9,IE10都正常,一时便摸不着头脑,为什么会被限制呢?原因在哪?安全限制问题,难道事设置的问题?于是在网上进行检索,各种说法都有,最准确的应该是“IE浏览器对非主动触发input[type=file]文件上传,进行安全限制,除非用户主动点击这个文件上传的input按钮。”,众所周知,input[type=file]这个文件上传按钮确实太low了,关键是不能自定义它的样式,这就很尴尬,绝大部分开发者都是采取隐藏此丑陋的按钮,使用另外一个比较高大上的按钮,然后间接触发隐藏的原生按钮。

  但是如果你是随便用个input或者button来间接触发文件上传,IE由于安全限制,就会报以上拒绝访问错误。为了,解决这个问题,必须主动触发,采用原生的上传按钮,肯定是可以,但是是不可能用它的,长得那么丑,这辈子都不可能用了(手动滑稽),所以,要主动触发就要借助label的for属性,绑定到对应的input上即可。此时,只需要把label的for属性,指向文件上传input的id,然后再定义好label的样式,即可。示例代码:

<form id="fileUploadF" method="post" target="formUpFile" class="form form-group text-right" enctype="multipart/form-data">
<input type="file" id="fileUpIpt" class="fileUpIpt form-inline" accept="*/*" name="files" multiple="multiple" >
<input type="hidden" name="qblcId" value="${qblcId}">
<label for="fileUpIpt" class="btn btn-sm btn-default upload-btn">
上传附件
</label>
</form>

目测这是最完美的解决方案了。

IE下文件上传, SCRIPT5: 拒绝访问 问题的更多相关文章

  1. ie下文件上传无权访问的问题

    最近项目遇到个问题,ie下文件上传无权访问,在网上找了很久才找到答案,原来是因为ie下不能用js触发input=file的点击事件,必须手动点击才可以.

  2. SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法

    最近项目转型使用SpringCloud框架下的微服务架构,各微服务之间使用Feign进行调用.期间,发现若被调用方法涉及到文件上传且仅存在单个文件时,一切正常,代码片段如下: @RequestMapp ...

  3. Web下文件上传下载的路径问题

    工程结构

  4. linux 下文件上传的两种工具(XFTP5和Putty之pscp)方式

    一.使用XFTP(,需要先在LINUX上安装启用FTP服务) 然后,在WINDOWS上启动XFPT6客户端,将下载的文件上传至LINUX 指定目录: 二.使用PUTTY软件安装目录下的PSCP命令 1 ...

  5. 不同环境下文件上传Uncaught SyntaxError: Unexpected end of input

    很奇怪的问题,相同的代码和相同的数据,在两台linux服务器上执行文件上传,一台正常上传,一台在ftl页面 报:Uncaught SyntaxError: Unexpected end of inpu ...

  6. asp.net mvc下文件上传

    典型的文件上传表单 <form action="/File" enctype="multipart/form-data" method="pos ...

  7. SpringBoot下文件上传与下载的实现

    原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...

  8. 在系统下文件上传报错:The temporary upload location [/tmp/tomcat.xxx/work/Tomcat/localhost/ROOT] is not valid

    线上的系统中长时间不访问时不能上传文件了,出现如下错误: 2019-03-11 23:37:42.741 ERROR 66505 --- [nio-8081-exec-3] o.a.c.c.C.[.[ ...

  9. SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法(2)

    书接上文. 上文中描述了如何在 SpringCloud+Feign环境下上传文件与form-data同时存在的解决办法,实践证明基本可行,但却会引入其他问题. 主要导致的后果是: 1. 无法与普通Fe ...

随机推荐

  1. nginx系列(七)静态文件合并combo

    根据雅虎性能优化准则,可以将大量的小型JS文件进行合并,用来提高WEB服务器的性能.下面就是笔者的一个实践. 目前必须安装在1.4.+才可以 官方:http://wiki.nginx.org/Http ...

  2. path.resolve和path.join的区别

    // test.js const path = require('path') let x1 = path.resolve('/目录1/目录2', '/目录3/目录4/') let x2 = path ...

  3. 一文带你了解Sql优化

    我们后台开发人员每天都难免与数据库打交道,那么你在写sql语句的时候有注重到自己sql的效率吗?当你sql查询速度很慢的时候你有想过是你的sql语句造成的吗?看完这篇文章,我相信你会对sql优化有了一 ...

  4. CTF-Wechall-第三天上午

    2020.09.11 奥力给,Wechall这平台不错哦,感觉是一个循序渐近的过程,可能是我是我这么排序的原因吧,hhhhh

  5. 用后台开发的逻辑理念学习VUE

    前言 近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以 ...

  6. JDK安装与基础环境变量配置 入门详解 - 精简归纳

    JDK安装与基础环境变量配置 JERRY_Z. ~ 2020 / 9 / 17 转载请注明出处!️ 目录 JDK安装与基础环境变量配置 一.下载 二.安装 (1).双击.exe文件 (2).全选安装工 ...

  7. 对vue的初步学习

    vue: vue:一个mvvm框架(库),和angular类似 比较容易上手 指令以v=xxx 一片html代码配合接送,在new一个vue实例 适合:移动端,小巧 vue基本雏形 v-model 一 ...

  8. VUE开发(一)Spring Boot整合Vue并实现前后端贯穿调用

    文章更新时间:2020/03/14 一.前言 作为一个后端程序员,前端知识多少还是要了解一些的,vue能很好的实现前后端分离,且更便于我们日常中的调试,还具备了轻量.低侵入性的特点,所以我觉得是很有必 ...

  9. CUMTCTF'2020 已做wp

    三天的比赛终于结束了,不知道有没有睡10个小时,感觉像中了魔一样,但也很享受这种感觉,除了没有能和我一起琢磨题目朋友.. 就最终结果而言还是有一些可惜,明明号称擅长web和misc反而是得分比例最小的 ...

  10. java经典算法40题-附带解决代码

    前一段时间工作比较闲,每天没有代码敲的日子有点无聊,于是为了保证自己的编程逻辑力的日常清醒,故百度了一些经典的java算法,然后自己思考编程解决问题,虽然那些东西比较基础了,但是有些题目小编看到了也是 ...