<!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上傳圖片前的圖片預(yù)覽效果</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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序自定義Modal彈框
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義Modal彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
javascript自執(zhí)行函數(shù)
本文主要介紹了javascript自執(zhí)行函數(shù)的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實(shí)現(xiàn)示例
本文主要介紹了JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法
這篇文章主要介紹了javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法,涉及javascript針對(duì)鼠標(biāo)事件及圖片透明度操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
基于javascript html5實(shí)現(xiàn)多文件上傳
這篇文章主要為大家詳細(xì)介紹了基于javascript html5實(shí)現(xiàn)多文件上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表附源碼下載
我們常見的手機(jī)通訊錄或微信通訊錄，聯(lián)系人信息是按字母順序排列的列表，通過點(diǎn)擊右側(cè)的字母，會(huì)迅速定位檢索到首字母對(duì)應(yīng)的聯(lián)系人。下面通過本文給大家分享JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表功能，需要的的朋友參考下吧
2017-07-07
輸入自動(dòng)提示搜索提示功能的使用說明:sugggestion.txt
該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示，提高了用戶體驗(yàn)
2013-09-09
從父頁(yè)面讀取和操作iframe中內(nèi)容方法
在父頁(yè)面中訪問iframe中的各個(gè)元素與一般的訪問頁(yè)面元素?zé)o本質(zhì)區(qū)別，無非是需要在父頁(yè)面中事先獲取需要處理的iframe對(duì)象，在獲取iframe對(duì)象后，其操作基本沒什么特別之處。
2009-07-07
swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤左右滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤左右滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06