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

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

================================

http://fanshuyao.iteye.com/

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

猜你喜欢