最近碰到个问题,在使用ajaxFileupload控件上传文件的时候,在IE下总是传不了,但FireFox和Chrome下则可以上传。跟踪代码,发现时$(form).submit();时出错了。
调试了n久,最后查资料说是IE下 file表单控件,不能用js控制打开文件选择器,必须要手动点击才可以,否则会报 “拒绝访问”。
所以,只能用按钮盖住file,但让点击事件透到file上面来打开文件选择器。
============================================================================================================
-
我们用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);
-
由于下载的 ajaxfileupload版本不同,
这个文件中也会爆出一些错误,
可自行百度解决