最近帮助女朋友解决JQuery-File-Upload 和IE9的兼容性问题(ps:本人搞java的,却来写前端,不过没办法)
问题描述:angular.js+jquery ,后台springmvc,使用JQuery-File-Upload在chrome,firefox中都没问题,但是在IE9......
问题1:上传后,接受response后提示预览还是下载?
原因:response的contentType是“appliaction/json”,于是NB的IE认为这是不安全的(不知道这样哪安全了)
解决方案:保证后台返回的contentType是“text/html”或“text/plain”,然后呢你需要改点东西
done: function(e, data){ var result = data.result[0].body ? data.result[0].body.innerHTML : data.result; result = JSON.parse(result); /* 写之后的代码*/ }
说明:后台是springMVC,@ResponseBody的话,别去自作聪明的加produces 或者consumes去改变的你contentType类型,因为Chrome这个大哥会不答应的,它需要用appliaction/json接受参数会给你报一个415呀406呀的错误,后台的小伙伴莫装逼了肯定是你的返回类型不是String,用String吧,是对象转成json给前端就行了
问题2:改完了,IE不去提示预览或下载了,根本没反应,发现它不调用done,fail.....
原因:你是不是为了美观没有直接点击 <input type="file" />? 然后用了个按钮之类的,把input隐藏了,用按钮去触发input?
解决方案:用个label的for去指定的input文件输入框
<label for="file_upload_id" >上传文件</label>
<input type="file" id="file_upload_id" name="XXX"/>
或者<div class="uploadFile">
<input type="text" class="input input-medium" id="fileInput">
<span>
<a href="javascript:void(0)" class="btn btn-icon btn-blue" > <span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上传</a>
<input type="file" name="files" class="btn-upload" id="file-upload" >
</span>
</div>
.uploadFile{
span{
position: relative;
display: inline-block;
}
#file-upload { // 设置占据空间为0,看似点击button,实则在点击file-upload,从而避开IE8处于安全限制禁止间接点击input type=file的bug
position: absolute;
width: 100%;
height: 100%;//和父元素同高宽
top: 0;
right: 0;
opacity: 0;
filter: alpha(opacity=0);
}//解决此bug的方法详见http://wenzhixin.net.cn/2014/07/30/ie8_file_problem
}
就说这么多吧,多了我也不懂,希望大家喜欢,一个后台搞这个真不容易,感谢https://segmentfault.com/q/1010000009635544
http://wenzhixin.net.cn/2014/07/30/ie8_file_problem这两篇的帮助