JS上傳圖片前實現(xiàn)圖片預覽效果的方法
更新時間：2015年03月02日 16:09:29 作者：代碼家園
這篇文章主要介紹了JS上傳圖片前實現(xiàn)圖片預覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下
本文實例講述了JS上傳圖片前實現(xiàn)圖片預覽效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS上傳圖片前的圖片預覽效果</title>
</head>
<body>
<input id="myfile" type="file" />
<br />
<img src="/images/logo.gif" alt="Image to be upload." />
<div id="info"></div>
<script type="text/javascript">
var dFile = document.getElementById('myfile');
var dImg = document.getElementsByTagName('img')[0];
var dInfo = document.getElementById('info');
dFile.onchange = function(){
if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;}
if(dFile.files){
dImg.src = dFile.files[0].getAsDataURL();
}else if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){
dImg.src = dFile.value;
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS上傳圖片前的圖片預覽效果</title>
</head>
<body>
<input id="myfile" type="file" />
<br />
<img src="/images/logo.gif" alt="Image to be upload." />
<div id="info"></div>
<script type="text/javascript">
var dFile = document.getElementById('myfile');
var dImg = document.getElementsByTagName('img')[0];
var dInfo = document.getElementById('info');
dFile.onchange = function(){
if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;}
if(dFile.files){
dImg.src = dFile.files[0].getAsDataURL();
}else if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){
dImg.src = dFile.value;
}
}
</script>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序自定義Modal彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了javascript自執(zhí)行函數(shù)的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實現(xiàn)示例
本文主要介紹了JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識別登陸的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了javascript感應鼠標圖片透明度顯示的方法,涉及javascript針對鼠標事件及圖片透明度操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
基于javascript html5實現(xiàn)多文件上傳
這篇文章主要為大家詳細介紹了基于javascript html5實現(xiàn)多文件上傳的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
我們常見的手機通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過點擊右側(cè)的字母，會迅速定位檢索到首字母對應的聯(lián)系人。下面通過本文給大家分享JS實現(xiàn)移動端按首字母檢索城市列表功能，需要的的朋友參考下吧2017-07-07
輸入自動提示搜索提示功能的使用說明:sugggestion.txt
該js文件中的代碼實現(xiàn)了[輸入自動搜索提示]功能,如百度、google搜索框中輸入一些字符會以下拉列表形式給出一些提示，提高了用戶體驗2013-09-09
在父頁面中訪問iframe中的各個元素與一般的訪問頁面元素無本質(zhì)區(qū)別，無非是需要在父頁面中事先獲取需要處理的iframe對象，在獲取iframe對象后，其操作基本沒什么特別之處。2009-07-07
swiper+echarts實現(xiàn)多個儀表盤左右滾動效果
這篇文章主要為大家詳細介紹了swiper+echarts實現(xiàn)多個儀表盤左右滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06