一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery点击头像上传并预览图片

时间:2017-04-26 编辑:简简单单 来源:一聚教程网

先给大家展示下效果图:

 HTML代码

 

 代码如下 复制代码

  

  

 

jQuery代码

 

 代码如下 复制代码

DS.upfile =function(){

  $('.img_show').each(function(){

   var$this= $(this),

    btn = $this.find('.upfile'),

    img = $this.find('img');

   btn.on('change',function(){

    varfile = $(this)[0].files[0],

     imgSrc = $(this)[0].value,

     url = URL.createObjectURL(file);

    if(!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)){

     alert("请上传jpg或png格式的图片!");

     returnfalse;

    }else{

     img.attr('src',url);

     img.css({'opacity':'1'});

    }

   });

  });

 }();

 

热门栏目