Question

如何解决 IE下 上传文件的兼容性问题

Answer 1

我们用ajaxfileupload 做文件上传
遇到的第一个问题是
addEventlistener方法报错误，百度了一下才知道，是
jquery的版本太高，ie 9及以下，要用jquery1.x,
而我用的事jquery2.x，于是

<!--[if !IE]> -->
<script src="jquery-2.0.0b2.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="jquery-1.9.1.js"></script>
<![endif]-->
解决了版本问题，仍然 提示上传错误
我的代码是这样的
$.ajaxFileUpload({
url: '/aj/uploadphone',
secureuri: false,
fileElementId: 'up_file',
dataType: "json",
type: "post",
beforeSend: function() {
$('#up1').html('上传中...');
},
success: function(res) {
console.log(res.msg);
},
error: function(res) {
alert('上传失败');
}
});
于是我去调试 ajaxfileupload.min.js 中的代码，
发现这句报错了 jQuery(form).submit();
错误提示是： 拒绝访问

怎么会拒绝访问那？
原来
表单中存在file是，必须通过手动触发点击file控件的浏览时一切操作，通过别的控件来触发file的点击事件时就会出现拒绝访问的提示，这是ie处于安全性 的限制。
因为自带的<input type="file"> 非常难看，我就把它隐藏了，而用一个按钮的点击事件 触发 他的点击事件， 在低版本的IE中是不允许的
于是我想到了美化 <input type="file">
幸好网上有
这回上传成功了 json 也返回了，

可返回json数据在IE浏览器中提示下载，
原因是 返回数据时的http头，content-type: application/json
而低版本的ie不认识这种头，所有不认识的，ie都提示下载保存，
实了好几种头，和查了一些资料 发现
低于IE10版本一下的IE浏览器都需要使用text/html格式的Response
最终解决
js:
$.ajaxFileUpload({
url: '/aj/uploadphone',
secureuri: false,
fileElementId: 'up_file',
dataType: "text", //ie低版本不支持json
type: "post",
beforeSend: function() {
$('#up1').html('上传中...');
},
success: function(res) {
res = eval('('+res+')'); //转为json对象
console.log(res.msg);
$('#mytextarea').val(filter_tels(res.msg));
},
error: function(res) {
alert('上传失败');
console.log(res, 'sss');
}
});
php 服务端：
直接 echo json_encode($data);
6
由于下载的 ajaxfileupload版本不同，
这个文件中也会爆出一些错误，
可自行百度解决