js上傳圖片及預(yù)覽功能實(shí)例分析
更新時(shí)間：2015年04月24日 12:00:53 作者：html5前端技術(shù)分享
這篇文章主要介紹了js上傳圖片及預(yù)覽功能,實(shí)例分析了javascript操作圖片上傳預(yù)覽功能的實(shí)現(xiàn)方法,需要的朋友可以參考下
本文實(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實(shí)現(xiàn)控制文字大中小顯示
網(wǎng)頁上可以自由改變字體大小是個(gè)非常有助于用戶體驗(yàn)的小功能，現(xiàn)在許多網(wǎng)站上都有此功能，今天我們來簡單實(shí)現(xiàn)下。2015-04-04
TDesign是騰訊各業(yè)務(wù)團(tuán)隊(duì)在服務(wù)業(yè)務(wù)過程中沉淀的一套企業(yè)級(jí)設(shè)計(jì)體系,下面這篇文章主要給大家介紹了關(guān)于前端的框架TDesign小程序組件庫體驗(yàn)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了javascript局部自定義鼠標(biāo)右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Gruntjs是JavaScript項(xiàng)目的構(gòu)建工具，也是基于node的一個(gè)命令行工具。很多開源JS項(xiàng)目都是使用它搭建。如jQuery、Qunit、CanJS等。2014-06-06
面向JavaScript入門初學(xué)者的二叉搜索樹算法教程
二叉搜索樹則是二叉樹的一種,但它只允許你在左側(cè)節(jié)點(diǎn)儲(chǔ)存比父節(jié)點(diǎn)小的值,右側(cè)只允許儲(chǔ)存比父節(jié)點(diǎn)大的值,這篇文章主要給大家介紹了關(guān)于JavaScript二叉搜索樹算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
javascript一個(gè)無懈可擊的實(shí)例化XMLHttpRequest的方法
由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同，往往需要對(duì)不同的瀏覽器做不同的處理，除了笨拙的瀏覽器嗅探技術(shù)，大約也就是對(duì)象檢測技術(shù)可用了。2010-10-10
javascript解決小數(shù)的加減乘除精度丟失的方案
這篇文章主要介紹了javascript解決小數(shù)的加減乘除精度丟失的方案的相關(guān)資料以及JavaScript中關(guān)于丟失數(shù)字精度的問題的探討，非常的詳細(xì),需要的朋友可以參考下2016-05-05
微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
axios對(duì)外出口API的設(shè)計(jì)方法
本文我們講解了 axios 對(duì)外出口 API 是如何設(shè)計(jì)的,我們首先介紹了內(nèi)部 Axios 類的實(shí)現(xiàn),這是 axios 核心邏輯所在,其次為了讓出口 API 更好使用,最后又在增加了 create() 方法,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)貪吃蛇的相關(guān)步驟、原理、算法操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05