图片上传时，QQ浏览器会弹出下载弹框的解决方案

在做这次的欢乐购车季项目中，出现了一个以前没有遇到的问题，就是点击上传按钮，QQ浏览器会弹出下载框，非常讨厌。从网上查了很多资料，虽然大家对QQ浏览器带给前端的麻烦是深恶痛绝，但是没办法，还得想办法解决。

我用的上传插件是ajaxUpload.js，是以前别人写的，与网上流传的ajaxUpload.js 很相似。 其他浏览器都没有问题，包括IE8，但是QQ浏览器却怎么弄都不行。最后找到原因是QQ浏览器对ajax返回的数据解析不了，所以会出现下载弹框，下载下来一看，就是服务器返回的内容：

{"code":"0","msg":"","data":{"url":"http:\/\/img.weidealer.auto.sina.com.cn\/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.cn/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>

这样修改后，程序就运行正确了。下面是html代码，上传用的是input type="file",然后让这个input透明，上面覆盖着一个满足活动要求的按钮。把input的z-index权限提高，这样点击按钮实际上点击的就是这个input

<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.cn/qc/buycar/images/close.png">
</div>
</div>
</div>

</div>

</li></span>

效果如下：