jquery-file-upload和ie9不兼容,提示下载,不调用done

最近帮助女朋友解决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这两篇的帮助
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值