wap端上传头像

<i class="photo" id="biPhoto" ><img src="images/loginimg.png"></i>
<i class="more">&#xe902;</i>
<input type="file" id="biPhotoInput" class="biPhotoInput" />

 

//上传图片
var result=document.getElementById("biPhoto");
var file=document.getElementById("biPhotoInput");

//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
result.InnerHTML="你的浏览器不支持FileReader接口!";
//使选择控件不可操作
file.setAttribute("disabled","disabled");
}else{
file.addEventListener('change',readAsDataURL,false); //如果支持就监听改变事件,一旦改变了就运行readFile函数。
}
function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("biPhotoInput").files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片!");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("biPhoto");
//显示文件
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
}

posted @ 2017-02-17 09:58  xiangcy  阅读(646)  评论(0)    收藏  举报