当前位置: 首页 > 工具软件 > jquery-upload > 使用案例 >

jQuery-File-Upload不兼容IE8解决方案

申阳伯
2023-12-01

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/

 

 

 

 

 类似资料: