先給大家展示下效果圖:
HTML代碼
<div class="img_show img_show1"> <img src="img2/img06.jpg" width="103" height="103" alt=""> <input type="file" class="upfile" accept="*/*"></div>
jQuery代碼
DS.upfile = function(){ $('.img_show').each(function(){ var $this = $(this), btn = $this.find('.upfile'), img = $this.find('img'); btn.on('change',function(){ var file = $(this)[0].files[0], imgSrc = $(this)[0].value, url = URL.createObjectURL(file); if (!//.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)){ alert("請上傳jpg或png格式的圖片!"); return false; }else{ img.attr('src',url); img.css({'opacity':'1'}); } }); }); }();
以上所述是小編給大家介紹的jQuery點擊頭像上傳并預覽圖片,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答