新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery如何實(shí)現(xiàn)點(diǎn)擊頭像上傳并預(yù)覽圖片
這篇文章主要為大家展示了“jQuery如何實(shí)現(xiàn)點(diǎn)擊頭像上傳并預(yù)覽圖片”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery如何實(shí)現(xiàn)點(diǎn)擊頭像上傳并預(yù)覽圖片”這篇文章吧。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:主機(jī)域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、潁泉網(wǎng)站維護(hù)、網(wǎng)站推廣。
先給大家展示下效果圖:
HTML代碼
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如何實(shí)現(xiàn)點(diǎn)擊頭像上傳并預(yù)覽圖片”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:jQuery如何實(shí)現(xiàn)點(diǎn)擊頭像上傳并預(yù)覽圖片
URL網(wǎng)址:http://www.ef60e0e.cn/article/pjhopp.html