手机QQ浏览器和微信内置webview对input type="file" 的change事件不灵
做一个H5页面，选中图片后上传，遇到手机QQ浏览器时 不能及时识别change事件，真是日了狗了，下面是针对这一现象的解决办法，不用change事件：
<!DOCTYPE>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta Content-Type="application/x-www-form-urlencoded" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="./js/lib/zetpo.min.js"></script>
<script src="./js/script/config.js"></script>
</head>
<body style="padding-top:0px">
<div class="container">
<div class="header">
<div class="examine negative" >
<span class="imgwords"><img src="./img/1.png"></span>
<span class="carwords">车辆档案</span>
</div>
<div class="examine negative">
<span class="imgwords "><img src="./img/2.png" ></span>
<span class="carwords">个人资料</span>
</div>
<div class="examine ">
<span class="imgwords"><img src="./img/3.png" ></span>
<span class="carwords">证件照片</span>
</div>
<div class="examine negative">
<span class="imgwords"><img src="./img/4.png"></span>
<span class="carwords">提交审核</span>
</div>
</div>
<div class="clear"></div>
<div class="content">
<p class="complateNew">您即将成为益驾好教练,请先完善证件照</p>
<div class="identify" style="float:left;margin-top:10%">
<p>驾驶证正面照</p>
<div class="kongbai"></div>
<div class="forInput" title="drive">
<input type="file" class="driveCode" title="drive" id="drive" onchange="showPhoto(this,‘drive‘)" name="upfile" id="upfile" multiple="multiple">
<img src="./img/+.png" class="addCode" title="drive" onclick="getPhoto(‘drive‘)">
</div>
</div>
<div class="identify" style="float:left;margin-left:14%;margin-top:10%">
<p>教练证正面照</p>
<div class="kongbai"></div>
<div class="forInput" title="coach">
<input type="file" class="driveCode" title="coach" id="coach" onchange="showPhoto(this,‘coach‘)" multiple="multiple">
<img src="./img/+.png" class="addCode" title="coach" onclick="getPhoto(‘coach‘)">
</div>
</div>
<div class="clear"></div>
<div class="identify" style="float:left;">
<p>身份证正面照</p>
<div class="kongbai"></div>
<div class="forInput" title="identity">
<input type="file" class="driveCode" title="identity" id="identity" onchange="showPhoto(this,‘identity‘)" multiple="multiple">
<img src="./img/+.png" class="addCode" title="identity" onclick="getPhoto(‘identity‘)">
</div>
</div>
<div class="identify" style="float:left;margin-left:14%">
<p>行驶证正面照</p>
<div class="kongbai"></div>
<div class="forInput" title="driving">
<input type="file" class="driveCode" title="driving" id="driving" onchange="showPhoto(this,‘driving‘)" multiple="multiple">
<img src="./img/+.png" class="addCode" title="driving" onclick="getPhoto(‘driving‘)">
</div>
</div>
<a class="validated"><img src="./img/submit.png" class="submit"></a>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$.get(BASE_URL+"/basic/user/reload",{
},function(result){
if(result && result.success==true){
if(result.userInfo.lisence.coach){
// $(".addCode[title=‘coach‘]").css("display","none");
var lisenceType="coach";
$.get(BASE_URL+"/basic/user/lisenceGettoken",{
lisenceType:lisenceType
},function(result){
if(result && result.success==true){
var downloadUrl=result.downloadUrl;
$("<img src=‘"+downloadUrl+"‘ class=‘addedImg‘ title=‘coach‘/>").appendTo(‘.forInput[title="coach"]‘);
}
})
}
if(result.userInfo.lisence.drive){
// $(".addCode[title=‘drive‘]").css("display","none");
var lisenceType="drive";
$.get(BASE_URL+"/basic/user/lisenceGettoken",{
lisenceType:lisenceType
},function(result){
if(result && result.success==true){
var downloadUrl=result.downloadUrl;
$("<img src=‘"+downloadUrl+"‘ class=‘addedImg‘ title=‘drive‘/>").appendTo(‘.forInput[title="drive"]‘);
}
})
}
if(result.userInfo.lisence.driving){
// $(".addCode[title=‘driving‘]").css("display","none");
var lisenceType="driving";
$.get(BASE_URL+"/basic/user/lisenceGettoken",{
lisenceType:lisenceType
},function(result){
if(result && result.success==true){
var downloadUrl=result.downloadUrl;
$("<img src=‘"+downloadUrl+"‘ class=‘addedImg‘ title=‘driving‘ />").appendTo(‘.forInput[title="driving"]‘);
}
})
}
if(result.userInfo.lisence.identity){
// $(".addCode[title=‘identity‘]").css("display","none");
var lisenceType="identity";
$.get(BASE_URL+"/basic/user/lisenceGettoken",{
lisenceType:lisenceType
},function(result){
if(result && result.success==true){
var downloadUrl=result.downloadUrl;
$("<img src=‘"+downloadUrl+"‘ class=‘addedImg‘ title=‘identity‘/>").appendTo(‘.forInput[title="identity"]‘);
}
})
}
}else{
if(result && result.errorInfo=="请先登录"){
location.href="/index.html";
}
}
})
})
function showPhoto(ele,type){
var files=ele.files,
file=files[0];
var reader = new FileReader();
reader.onload=function(){
$("<img src=‘"+this.result+"‘ class=‘addedImg‘ title=‘"+type+"‘ />").appendTo(‘.forInput[title‘+‘=‘+‘"‘+type+‘"‘+‘]‘);
}
reader.readAsDataURL(file);
var lisenceType=type;
$.get(BASE_URL+"/basic/user/lisenceUpToken",{
lisenceType:lisenceType
},function(result){
if(result && result.success == true){
var upToken=result.upToken;
var env = result.env;
var oMyForm = new FormData();
var href=location.href;
var id=href.replace(/^.+?id\=/,‘‘);
var key=env+"/"+id;
oMyForm.append("token",upToken);
oMyForm.append("key", key);
oMyForm.append("file",file);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://upload.qiniu.com/");
oReq.send(oMyForm);
oReq.onreadystatechange = function (){
if(oReq.readyState==4 && oReq.status==200){
$(‘.driveCode[title‘+‘=‘+‘"‘+type+‘"‘+‘]‘).replaceWith(‘<input type="file" class="driveCode" title=‘+‘"‘+type+‘" multiple="multiple">‘);
$.post(BASE_URL+"/basic/user/lisence",{
lisenceType:lisenceType
},function(result){
if(result.success==true){
}
})
}
}
}
})
}
function getPhoto(type){
$(‘.driveCode[title="‘+type +‘"]‘).trigger("click");
}
$(‘.forInput‘).on(‘click‘,‘.addedImg‘,function(){
var type=$(this).attr("title");
$(this).remove();
$(‘.driveCode[title="‘+type +‘"]‘).trigger("click");
});
$(".validated").on("click",function(){
if("img[title=‘coach‘] && img[title=‘drive‘] && img[title=‘identity‘] && img[title=‘driving‘]"){
//资料上传
location.href="/complate.html"
}else{
alert("请等待图片上传完成");
}
})
</script>
文章来自：http://my.oschina.net/fuckBAT/blog/492887