javascript實現(xiàn)圖片實時預(yù)覽的兩種方式
標簽:
JavaScript
一、FileReader(base64):
代码:
<input id="file" type="file"><img id="img" alt=""><script>var file = document.getElementById('file')var img = document.getElementById('img')file.addEventListener('change',function(){ var obj = file.files[0] var reader = new FileReader(); reader.readAsDataURL(obj); reader.onloadend = function() { img.setAttribute('src',reader.result); }})</script>
二、window.URL.createObjectURL(blob):
代码:
<input id="file" type="file"><img id="img" alt=""><script>var file = document.getElementById('file')var img = document.getElementById('img')file.addEventListener('change',function(){ var obj = file.files[0] var src = window.URL.createObjectURL(obj) img.setAttribute('src',src);})</script>
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦