js兼容火狐顯示上傳圖片預覽效果的方法
更新時間：2015年05月21日 09:41:05 作者：3H
這篇文章主要介紹了js兼容火狐顯示上傳圖片預覽效果的方法,涉及js調(diào)用FileReader實現(xiàn)圖片預覽功能的技巧,需要的朋友可以參考下
本文實例講述了js兼容火狐顯示上傳圖片預覽效果的方法。分享給大家供大家參考。具體實現(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>
運行效果如下圖所示：
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
js 頁面刷新location.reload和location.replace的區(qū)別小結(jié)
在實際應(yīng)用的時候，重新刷新頁面的時候，我們通常使用： location.reload() 或者是 history.go(0) 來做。下面有一些相關(guān)的內(nèi)容，大家看完了就會有更多的收獲。2009-12-12
javascript onclick事件改變選中行的顏色,方法簡單，大家參考使用吧2013-12-12
webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了WebGL 顏色與紋理使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)動態(tài)列表項的順序加載動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細介紹了nodejs與javascript中aes加密的相關(guān)資料，感興趣的朋友可以參考一下2016-05-05
這篇文章主要為大家詳介紹了如何讓JavaScript代碼不可斷點，文中的示例代碼講解詳細，對我們學習JavaScript有一定幫助，感興趣的可以了解一下2022-08-08
這篇文章主要介紹了JavaScript實現(xiàn)串行請求的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
JavaScript架構(gòu)前端不能沒有監(jiān)控系統(tǒng)原因
這篇文章主要為大家介紹了為什么前端不能沒有監(jiān)控系統(tǒng)的原因，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
uniapp發(fā)送formdata表單請求2種方法(全網(wǎng)最簡單方法)
這篇文章主要給大家介紹了關(guān)于uniapp發(fā)送formdata表單請求2種方法的相關(guān)資料,本文介紹的方法應(yīng)該是全網(wǎng)最簡單方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09