`
阅读更多

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/

 

 

 

 

1
0
分享到:
评论
1 楼 蕃薯耀 2018-12-27  
jQuery-File-Upload不兼容IE8解决方案
jQuery-File-Upload不上传
jQuery-File-Upload使用
jQuery-File-Upload ADD方法没调用

============
蕃薯耀

相关推荐

    jQuery-File-Upload for asp.net MVC

    《jQuery-File-Upload在ASP.NET MVC中的应用详解》 在Web开发中,文件上传功能是必不可少的一部分,尤其是...总的来说,jQuery-File-Upload与ASP.NET MVC的结合,为我们提供了一个强大且易于使用的文件上传解决方案。

    jQuery-File-Upload-master

    jQuery File Upload,顾名思义,是基于jQuery的一个文件上传解决方案。它支持多文件选择、进度条显示、预览、取消上传等高级功能,同时也兼容各种现代浏览器,包括Chrome、Firefox、Safari、Opera和IE9及以上版本。...

    jQuery-File-Upload-9.9.2.zip

    jQuery File Upload 9.9.2是一款优秀的JavaScript插件,它为开发者提供了高效、易用且功能丰富的文件上传解决方案。这款插件以其高度的兼容性、多文件选择与拖放上传的特性,以及用户友好的预览和进度反馈机制,深受...

    jQuery-File-Upload

    总结,jQuery-File-Upload 是一个功能强大且灵活的文件上传解决方案,它不仅简化了文件上传的实现,还提供了丰富的自定义选项和事件处理机制,是Web开发中的宝贵工具。无论你是初学者还是经验丰富的开发者,都能从中...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    jQuery-1.8.3和2.1.4版本代表了其在不同阶段的发展,而jQuery File Upload和jQuery Iframe Transport则是针对文件上传场景的优秀解决方案。理解和掌握这些知识点,将使你在实际项目中更加得心应手,提升开发效率。

    jquery.upload.js

    1. 兼容性问题:jQuery.upload.js依赖HTML5的File API,故不支持IE8及以下版本的浏览器。可以使用Flash或Silverlight等技术来实现老浏览器的兼容。 2. 大文件上传:对于大文件,可能需要分块上传。这需要服务器端...

    jQuery File Upload 基于Jquery的图片上传组件.zip

    总的来说,jQuery File Upload是一个强大且灵活的图片上传解决方案,它简化了文件上传的复杂性,提供了丰富的功能和高度可定制性。无论你是初学者还是经验丰富的开发者,都能快速地将其集成到项目中,提升用户在文件...

    文件上传插件

    6. **兼容性**:jQuery-File-Upload考虑到不同的浏览器兼容性,包括对IE8的支持,这通常是通过Flash fallback实现的。然而,随着现代浏览器的普及,Flash已逐渐被淘汰,因此在新的项目中,可能需要考虑移除对Flash的...

    jqueryuploadfile基于jquery的文件上传

    3. **兼容性问题**:虽然插件尽力支持多种浏览器,但老版本的IE可能不兼容,需要考虑降级方案或提示用户升级浏览器。 五、应用场景 - 图片墙:用户可以一次性上传多张图片,系统自动缩略显示。 - 视频上传:支持大...

    jquery upload

    1. **跨浏览器兼容性**:jQuery Upload 兼容各种主流浏览器,包括IE9及以上版本,Firefox,Chrome,Safari和Opera。 2. **拖放上传**:支持现代浏览器的拖放上传功能,用户可以通过直接拖动文件到指定区域进行上传...

    FileUpload

    "jQuery-File-Upload-9.5.7"是一个广泛使用的开源库,它提供了高效、用户友好的文件上传解决方案。这个库基于jQuery,结合了DiskFileItemFactory和ServletFileUpload技术,为开发者提供了强大的文件处理能力。本文将...

    多文件上传 C# 不兼容ie9

    描述中的"非常好用的多文件上传 适用多个浏览器 但是不兼容ie9,不介意者可以下载"暗示了这个解决方案可能采用了HTML5的多文件上传功能或者依赖于某些现代浏览器的特性,因此在非IE9的现代浏览器中表现良好。...

    ajax php文件上传

    这个解决方案提供了一个优雅的界面,使得用户可以无刷新地上传文件,大大提升了用户体验。 ### 1. Ajax 文件上传 Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器交换数据并...

    jqueryupload上传控件

    jQueryUpload控件作为一个强大且易用的上传解决方案,深受开发者喜爱。本文将深入解析jQueryUpload的原理、配置及其实现方式,并探讨其在实际项目中的应用。 一、jQueryUpload概述 jQueryUpload是由Valums开发的一...

    jquery实现图片即时上传

    对于兼容IE的实现,我们需要考虑到旧版本的IE不支持HTML5的File API。为了兼容,可以使用`Flash`或`Silverlight`插件作为备选方案。然而,现代的解决方案更倾向于使用HTML5的`FormData`对象,它允许我们发送二进制...

    jquery+SWFUpload+COS上传组件的使用 兼容ie6

    本文将深入探讨如何使用jQuery、SWFUpload和腾讯云对象存储(COS)来创建一个兼容IE6的上传组件。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中,...

    jquery上传插件uploadifive

    通过其强大的自定义能力,开发者可以构建出满足各种需求的上传解决方案。 总之,Uploadifive是一款功能强大、易于使用的jQuery上传插件,它极大地简化了HTML5环境下文件上传的实现,是开发者的得力工具。

    jquery upload demo

    - 对于大型项目,可能需要考虑使用更高级的文件上传解决方案,如Plupload或Resumable.js,以支持断点续传等功能。 综上所述,jQuery Upload Demo是一个利用jQuery和Uploadify插件实现的交互式文件上传演示,它展示...

    一个基于webuploader兼容IE9的VUE上传插件

    然而,考虑到浏览器的兼容性问题,尤其是对于仍然有一定市场份额的IE9,开发者需要找到合适的解决方案。本篇文章将围绕“一个基于webuploader兼容IE9的VUE上传插件”这一主题,深入探讨如何在Vue项目中实现IE9的文件...

Global site tag (gtag.js) - Google Analytics