js兼容火狐顯示上傳圖片預(yù)覽效果的方法
更新時間:2015年05月21日 09:41:05 作者:3H
這篇文章主要介紹了js兼容火狐顯示上傳圖片預(yù)覽效果的方法,涉及js調(diào)用FileReader實現(xiàn)圖片預(yù)覽功能的技巧,需要的朋友可以參考下
本文實例講述了js兼容火狐顯示上傳圖片預(yù)覽效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type="text/css"> div {width:100px;height:100px;border: 1px #A3BFE7 solid;} img {width:atuo;height:atuo;} </style> <script type="text/javascript"> function viewPic() { var oFReader = new FileReader(); oFReader.onload = function(e) { document.getElementById("uploadPreview").src = e.target.result; } if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; oFReader.readAsDataURL(oFile); } </script> </head> <body> <input id="uploadImage" type="file" name="myPhoto" onchange='viewPic();'/><br> <img id="uploadPreview" src=""/> </body> </html>
運(yùn)行效果如下圖所示:
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- js實現(xiàn)上傳圖片并顯示圖片名稱
- 上傳圖片時JS自動顯示圖片
- JS+html5實現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- 基于JavaScript FileReader上傳圖片顯示本地鏈接
- JS實現(xiàn)上傳圖片的三種方法并實現(xiàn)預(yù)覽圖片功能
- js實現(xiàn)上傳圖片預(yù)覽的方法
- js實現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript 驗證上傳圖片大小[客戶端]
- js 上傳圖片預(yù)覽問題
- javascript實現(xiàn)上傳圖片并預(yù)覽的效果實現(xiàn)代碼
- JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
相關(guān)文章
js 頁面刷新location.reload和location.replace的區(qū)別小結(jié)
在實際應(yīng)用的時候,重新刷新頁面的時候,我們通常使用: location.reload() 或者是 history.go(0) 來做。下面有一些相關(guān)的內(nèi)容,大家看完了就會有更多的收獲。2009-12-12webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07JavaScript架構(gòu)前端不能沒有監(jiān)控系統(tǒng)原因
這篇文章主要為大家介紹了為什么前端不能沒有監(jiān)控系統(tǒng)的原因,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06uniapp發(fā)送formdata表單請求2種方法(全網(wǎng)最簡單方法)
這篇文章主要給大家介紹了關(guān)于uniapp發(fā)送formdata表單請求2種方法的相關(guān)資料,本文介紹的方法應(yīng)該是全網(wǎng)最簡單方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09