jQuery-File-Upload不兼容IE8解决方案
jQuery-File-Upload ADD方法没调用
================================
©Copyright 蕃薯耀 2018年12月27日
http://fanshuyao.iteye.com/
一、问题描述:
在IE8模式下
<meta http-equiv="X-UA-Compatible" content="IE=8" />
jQuery-File-Upload点击上传文件按钮选择文件后出现无反应、文件不上传的问题
二、解决方案:
1、首先看Html代码:
<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a> <div style="display: none;"> <input id="inputUploadMdbFile" type="file" name="mdbFiles" /> </div>
引用的js
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ui.widget.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.iframe-transport.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.fileupload.js"></script>
通过一个A标签的按钮的点击,去触发选择文件上传type="file"的控件,这样页面美观,用户体验好,这个操作在IE11是可以正常上传的。
但在IE8模式下,jQuery-File-Upload不能正常上传,选择文件后无反应、无法自动上传文件。
2、js调试问题
发现选择文件后,jQuery-File-Upload的ADD方法并未调用。就是文件没有被添加到jQuery-File-Upload中,即jQuery-File-Upload识别不到上传的文件。
网上查找原因,说是:
IE8出于安全性,不允许这么做
IE doesn’t allow manipulation of the type=”file” input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an “Access is denied” error on the form submit.
3、jQuery-File-Upload上传原理
a、对某个file input标签执行 upload插件的初始化方法后,插件会监听这个file input的change事件
b、当选择文件的时候,会触发change事件
if ($.support.fileInput) { this._on(this.options.fileInput, { change: this._onChange }); }
c、在_onChange处理函数中,会遍历files,触发upload插件的change方法
d、当change函数返回true的时候,会触发upload插件的add方法
e、在upload插件的回调函数中,会传入两个参数,fn(事件信息, 数据对象)
f、在upload插件的add方法中可以执行自己写的逻辑
例如想判断文件后缀是否满足条件,插件自带的参数 acceptFileTypes 在简化模型中不起作用,我们可以在change和add方法中判断,如果不满足返回false即可,如果通过可以直接执行data.submit()进行提交
add: function(e, data){ //var acceptFileTypes = /^(gif|jpe?g|png)$/i;//图片 var acceptFileTypes = /^mdb$/i; var files = data.originalFiles; if(files && files.length > 0){ var isPass = true; for(var i=0; i<files.length; i++){ var name = files[i]["name"]; var lastIndex = name.lastIndexOf("."); if(lastIndex < 0){ isPass = false; break; }else{ var fileType = name.substring(lastIndex + 1); if(!acceptFileTypes.test(fileType)){ isPass = false; break; } } } if(!isPass){ top.$.messager.alert("系统提示","只能上传类型为*.mdb的文件","info"); return; } top.loading("文件上传中,请等待…"); data.submit(); } }
g、当上传成功会执行done函数(响应成功),失败则会执行fail函数
就是由于IE8的原因,导致jQuery-File-Upload没有触发到onchange事件,导致识别不到文件,没有调用add方法。
4,修改Html代码
<div style="display: inline-block;position: relative;"> <a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a> <input id="inputUploadMdbFile" type="file" name="mdbFiles" style=""/> </div>
5、增加css代码
<style type="text/css"> #inputUploadMdbFile{ position: absolute; width: 100%; height: 100%; top: 0; right: 0; opacity:0; filter:alpha(opacity=0); cursor: pointer; } </style>
6、解决原理
利用绝对、相对定位,把上传组件(type="file")定位在按钮上面,然后把上传组件的透明度设置成0,达到隐藏的效果,当点击按钮时,其实是点击了上传组件,这样避免IE隐藏上传组件的问题。
资料参考:
https://blog.csdn.net/huangpin815/article/details/72888340
https://www.cnblogs.com/tgwang/p/4629645.html
================================
©Copyright 蕃薯耀 2018年12月27日
http://fanshuyao.iteye.com/
相关推荐
《jQuery-File-Upload在ASP.NET MVC中的应用详解》 在Web开发中,文件上传功能是必不可少的一部分,尤其是...总的来说,jQuery-File-Upload与ASP.NET MVC的结合,为我们提供了一个强大且易于使用的文件上传解决方案。
jQuery File Upload,顾名思义,是基于jQuery的一个文件上传解决方案。它支持多文件选择、进度条显示、预览、取消上传等高级功能,同时也兼容各种现代浏览器,包括Chrome、Firefox、Safari、Opera和IE9及以上版本。...
jQuery File Upload 9.9.2是一款优秀的JavaScript插件,它为开发者提供了高效、易用且功能丰富的文件上传解决方案。这款插件以其高度的兼容性、多文件选择与拖放上传的特性,以及用户友好的预览和进度反馈机制,深受...
总结,jQuery-File-Upload 是一个功能强大且灵活的文件上传解决方案,它不仅简化了文件上传的实现,还提供了丰富的自定义选项和事件处理机制,是Web开发中的宝贵工具。无论你是初学者还是经验丰富的开发者,都能从中...
jQuery-1.8.3和2.1.4版本代表了其在不同阶段的发展,而jQuery File Upload和jQuery Iframe Transport则是针对文件上传场景的优秀解决方案。理解和掌握这些知识点,将使你在实际项目中更加得心应手,提升开发效率。
1. 兼容性问题:jQuery.upload.js依赖HTML5的File API,故不支持IE8及以下版本的浏览器。可以使用Flash或Silverlight等技术来实现老浏览器的兼容。 2. 大文件上传:对于大文件,可能需要分块上传。这需要服务器端...
总的来说,jQuery File Upload是一个强大且灵活的图片上传解决方案,它简化了文件上传的复杂性,提供了丰富的功能和高度可定制性。无论你是初学者还是经验丰富的开发者,都能快速地将其集成到项目中,提升用户在文件...
6. **兼容性**:jQuery-File-Upload考虑到不同的浏览器兼容性,包括对IE8的支持,这通常是通过Flash fallback实现的。然而,随着现代浏览器的普及,Flash已逐渐被淘汰,因此在新的项目中,可能需要考虑移除对Flash的...
3. **兼容性问题**:虽然插件尽力支持多种浏览器,但老版本的IE可能不兼容,需要考虑降级方案或提示用户升级浏览器。 五、应用场景 - 图片墙:用户可以一次性上传多张图片,系统自动缩略显示。 - 视频上传:支持大...
1. **跨浏览器兼容性**:jQuery Upload 兼容各种主流浏览器,包括IE9及以上版本,Firefox,Chrome,Safari和Opera。 2. **拖放上传**:支持现代浏览器的拖放上传功能,用户可以通过直接拖动文件到指定区域进行上传...
"jQuery-File-Upload-9.5.7"是一个广泛使用的开源库,它提供了高效、用户友好的文件上传解决方案。这个库基于jQuery,结合了DiskFileItemFactory和ServletFileUpload技术,为开发者提供了强大的文件处理能力。本文将...
描述中的"非常好用的多文件上传 适用多个浏览器 但是不兼容ie9,不介意者可以下载"暗示了这个解决方案可能采用了HTML5的多文件上传功能或者依赖于某些现代浏览器的特性,因此在非IE9的现代浏览器中表现良好。...
这个解决方案提供了一个优雅的界面,使得用户可以无刷新地上传文件,大大提升了用户体验。 ### 1. Ajax 文件上传 Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器交换数据并...
jQueryUpload控件作为一个强大且易用的上传解决方案,深受开发者喜爱。本文将深入解析jQueryUpload的原理、配置及其实现方式,并探讨其在实际项目中的应用。 一、jQueryUpload概述 jQueryUpload是由Valums开发的一...
对于兼容IE的实现,我们需要考虑到旧版本的IE不支持HTML5的File API。为了兼容,可以使用`Flash`或`Silverlight`插件作为备选方案。然而,现代的解决方案更倾向于使用HTML5的`FormData`对象,它允许我们发送二进制...
本文将深入探讨如何使用jQuery、SWFUpload和腾讯云对象存储(COS)来创建一个兼容IE6的上传组件。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中,...
通过其强大的自定义能力,开发者可以构建出满足各种需求的上传解决方案。 总之,Uploadifive是一款功能强大、易于使用的jQuery上传插件,它极大地简化了HTML5环境下文件上传的实现,是开发者的得力工具。
- 对于大型项目,可能需要考虑使用更高级的文件上传解决方案,如Plupload或Resumable.js,以支持断点续传等功能。 综上所述,jQuery Upload Demo是一个利用jQuery和Uploadify插件实现的交互式文件上传演示,它展示...
然而,考虑到浏览器的兼容性问题,尤其是对于仍然有一定市场份额的IE9,开发者需要找到合适的解决方案。本篇文章将围绕“一个基于webuploader兼容IE9的VUE上传插件”这一主题,深入探讨如何在Vue项目中实现IE9的文件...