码迷,mamicode.com
首页 > Web开发 > 详细

上传图片显示缩略图

时间:2016-02-20 21:29:32      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

<script>
function veriFormat(val){
var strMrt = val.val().split(".")[val.val().split(".").length - 1];
if(strMrt){
ext = strMrt.toUpperCase();
if(ext!="BMP"&&ext!="PNG"&&ext!="GIF"&&ext!="JPG"&&ext!="JPEG"){
alert("图片限于bmp,png,gif,jpeg,jpg格式");
/*val.nextAll(‘.tumb_area‘).slideUp(100);*/
val.val("");
return false;
}else{
return true;
}
}else{
return true;
}
}

$(‘body‘).on(‘change‘,‘.input_file‘,function(e){
var file = e.target.files[0];
var reader = new FileReader();
var t=$(this);
if(veriFormat(t)){
/*t.nextAll(‘.tumb_area‘).slideUp(100);*/
reader.onload = function(e){
//displayImage($(‘bd‘),e.target.result);
//alert(‘load‘);
t.nextAll(‘.tumb_area‘).children(‘img‘).attr(‘src‘,e.target.result);
t.nextAll(‘.tumb_area‘).slideDown(100);
}
reader.readAsDataURL(file);
t.blur();
}
});
</script>

上传图片显示缩略图

标签:

原文地址:http://www.cnblogs.com/mrt-yyy/p/5203911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!