admin管理员组文章数量:1626244
在做这次的欢乐购车季项目中，出现了一个以前没有遇到的问题，就是点击上传按钮，QQ浏览器会弹出下载框，非常讨厌。从网上查了很多资料，虽然大家对QQ浏览器带给前端的麻烦是深恶痛绝，但是没办法，还得想办法解决。
我用的上传插件是ajaxUpload.js，是以前别人写的，与网上流传的ajaxUpload.js 很相似。 其他浏览器都没有问题，包括IE8，但是QQ浏览器却怎么弄都不行。最后找到原因是QQ浏览器对ajax返回的数据解析不了，所以会出现下载弹框，下载下来一看，就是服务器返回的内容：
{"code":"0","msg":"","data":{"url":"http:\/\/img.weidealer.auto.sina\/mall\/d93097cb656ffc78ba5fa21a10663ed8.jpg"}}
下面是我的ajax请求数据：
<span style="font-size:14px;">//图片上传
var upload_func = function(e){
var node = $(this).parent().find('[type="file"]');
var id = node.attr("id");
var pattern = /(jpg|jpeg|png|gif)/i;
node.siblings('.upChuan').eq(0).attr('fileid','1');
if(!pattern.test(node.val())) {
alert("请选择jpg、jpeg、png、gif格式的图片文件");
} else {
var lib = this;
var order_id = $('input[name=order_id]').val();
$.ajaxFileUpload ({
url:'/qiche/user/upload?order_id=' + order_id +'&fileid='+node.attr("name"),
fileElementId:node.attr("id"),
dataType: 'json',
success: function (data) {
//console.log(data)
if(data.code=='0'){
//console.log('000000000000')
$($(lib).parent().find('.upPic>div>img')[0]).attr('src',data.data.url);
$(lib).parent().find(".upPic").show();
$(lib).parent().find('input[type="hidden"]').val($($("#file1").parent().find('.upPic img')[0]).attr('src'));
if(lib.className =='upChuan sail-up'){
var html = [];
html.push('<div style="position:relative;">');
html.push('<img class="imghead" src="">');
html.push(' <div class="pic_closen2">');
html.push('<img class="closePic2" width="20" height="20" src="http://i3.sinaimg/qc/buycar/images/close.png">');
html.push('</div>');
html.push('</div>');
$('.upPic2').append(html.join(""));
$($(lib).parent().find('.upPic2>div>img')[ii]).attr('src', data.data.url);
$(lib).parent().find(".upPic2").show();
$(lib).parent().find('.upPic2').siblings('.sel_pic').text('请选择图片');
ii++;
}
//console.log(data.data.url);
}else{
showMsg(data.msg);
}
},
error: function (data) {
console.log(data);
showMsg(data.msg);
}
});
}
};</span>解决办法是在php里判断了一下浏览器，如果是QQ浏览器，那么把Content-Type 的格式改成 text/html;
php具体代码：
<span style="font-size:18px;background-color: rgb(255, 255, 204);">if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE") ===false) {//不是ie内核
header('Content-Type: application/json;charset=UTF-8');
}
if(strpos($_SERVER["HTTP_USER_AGENT"],"QQBrowser") > 0){//QQ浏览器上传时会有问题
header('Content-Type: text/html;charset=UTF-8');
}</span>
<span style="font-size:14px;"><li>
<p class="up_chuan" style="*margin-right:50px;">上传购车发票：</p>
<div class="add_pic" style="*margin-left:50px;">
<div class="sel_pic">
选择图片
</div>
<input type="file" name="file" class="file_upload" id="file1">
<input type="hidden" name="hidden[]" id="hidden1" value="">
<a class="upChuan" href="javascript:;" fileid="0">上传</a>
<!--上传后显示的图片-->
<div class="upPic">
<div style="position:relative;">
<img class="imghead" src="">
<div class="pic_closen">
<img class="closePic" width="20" height="20" src="http://www.sinaimg/qc/buycar/images/close.png">
</div>
</div>
</div>
</div>
</li></span>效果如下：
版权声明：本文标题：图片上传时，QQ浏览器会弹出下载弹框的解决方案 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728946966a1181287.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论