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