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/