輕松實(shí)現(xiàn)js圖片預(yù)覽功能
更新時(shí)間：2021年10月19日 09:00:12 作者：daliu_it
這篇文章幫助大家輕輕松松實(shí)現(xiàn)js圖片預(yù)覽功能，主要介紹了純JS實(shí)現(xiàn)本地圖片預(yù)覽的方法，具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)圖片預(yù)覽的方法，自己以前寫(xiě)的一個(gè)，代碼比較簡(jiǎn)潔，分享給大家供大家參考。具體如下：
一、效果預(yù)覽
效果圖：
二、實(shí)現(xiàn)代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js圖片預(yù)覽功能</title>
<script language=javascript>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了微信小程序加載機(jī)制及運(yùn)行機(jī)制圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
本篇文章主要介紹了小程序?qū)悠吲Ｔ拼鎯?chǔ)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了JavaScript事件類(lèi)型中UI事件詳解的相關(guān)資料,需要的朋友可以參考下2016-01-01
javascript 原型模式實(shí)現(xiàn)OOP的再研究
目前網(wǎng)絡(luò)上有關(guān)javascript實(shí)現(xiàn)OOP模式的方案基本上都是prototype模式，一般性的示例代碼如下2009-04-04
Typescript中extends關(guān)鍵字的基本使用
extends表示具體的泛型類(lèi)型只能是object類(lèi)型,某個(gè)變量如果能斷言成object類(lèi)型[變量as object],那么這個(gè)變量的類(lèi)型符合T extends object,下面這篇文章主要給大家介紹了關(guān)于Typescript中extends關(guān)鍵字基本使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript中動(dòng)態(tài)向表格添加數(shù)據(jù)
本文給大家分享使用原生javascript實(shí)現(xiàn)動(dòng)態(tài)向表格中添加數(shù)據(jù)的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了js獲取USB掃碼槍數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript 事件冒泡簡(jiǎn)介及應(yīng)用
這篇文章有助于大家認(rèn)識(shí)事件冒泡的一些知識(shí)。2010-01-01
微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果
這篇文章主要介紹了微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
Bootstrap中定制LESS-顏色及導(dǎo)航條(推薦)
這篇文章主要介紹了Bootstrap中定制LESS-顏色及導(dǎo)航條的相關(guān)資料，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11