js上傳圖片及預(yù)覽功能實(shí)例分析
本文實(shí)例講述了js上傳圖片及預(yù)覽功能。分享給大家供大家參考。具體分析如下:
參考了網(wǎng)上一些人代碼寫了一個(gè)上傳圖片及時(shí)預(yù)覽的功能
<img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".jpg.png.gif"; var extentionArr=fileTag.value.split('.'); var extention = extentionArr[extentionArr.length-1]; if(!(allowExtention.indexOf(extention)>-1)){ alert("Please upload image!"); }else{ //for adveced broswer(the newest ie,chrome,ff) if(typeof(FileReader)!=="undefined"){ var reader = new FileReader(); reader.readAsDataURL(fileTag.files[0]); reader.onload = function(e){ document.getElementById(imgTagId).setAttribute("src", e.target.result); } }else{ //for(ie6) document.getElementById(imgTagId).setAttribute("src",fileTag.value); } } }
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
深入探討JavaScript中Class的語(yǔ)法與使用
這篇文章將帶大家深入探討 class 在 JavaScript 中的作用、語(yǔ)法和使用方法,并與 ES5 構(gòu)造函數(shù)進(jìn)行對(duì)比,希望可以幫助大家更好地理解和應(yīng)用類的概念2023-06-06viewer.js實(shí)現(xiàn)圖片預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了viewer.js實(shí)現(xiàn)圖片預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06國(guó)外JavaScript經(jīng)典封裝集合整理
國(guó)外JavaScript經(jīng)典封裝集合整理...2007-05-05uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
這篇文章主要給大家介紹了關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的相關(guān)資料,在相應(yīng)的頁(yè)面中完成對(duì)消息的處理,如果有新消息,則在tabBar頁(yè)面中顯示紅點(diǎn)提醒用戶,需要的朋友可以參考下2023-08-08javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實(shí)現(xiàn)對(duì)表格元素進(jìn)行排序操作,分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原,和排升序和降序的功能,文章末尾附完整代碼,感興趣的小伙伴們可以參考一下2015-11-11JavaScript設(shè)置彈出式獨(dú)立窗口頁(yè)面和window的方法舉例詳解
window.open是網(wǎng)頁(yè)中經(jīng)常遇到的彈出窗口代碼,不是網(wǎng)絡(luò)中比較反感的那類彈出代碼,下面這篇文章主要給大家介紹了關(guān)于JavaScript設(shè)置彈出式獨(dú)立窗口頁(yè)面和window的方法,需要的朋友可以參考下2024-01-01JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽調(diào)整div大小
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽調(diào)整div大小,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03