輕松實現(xiàn)js圖片預(yù)覽功能

更新時間：2021年10月19日 09:00:12 作者：daliu_it

這篇文章幫助大家輕輕松松實現(xiàn)js圖片預(yù)覽功能，主要介紹了純JS實現(xiàn)本地圖片預(yù)覽的方法，具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)圖片預(yù)覽的方法，自己以前寫的一個，代碼比較簡潔，分享給大家供大家參考。具體如下：

一、效果預(yù)覽

效果圖：

二、實現(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>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序加載機制及運行機制圖解
這篇文章主要介紹了微信小程序加載機制及運行機制圖解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-11-11
本篇文章主要介紹了小程序?qū)悠吲Ｔ拼鎯Φ姆椒?，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07

JavaScript事件類型中UI事件詳解

這篇文章主要介紹了JavaScript事件類型中UI事件詳解的相關(guān)資料,需要的朋友可以參考下

2016-01-01

javascript 原型模式實現(xiàn)OOP的再研究

目前網(wǎng)絡(luò)上有關(guān)javascript實現(xiàn)OOP模式的方案基本上都是prototype模式，一般性的示例代碼如下

2009-04-04

Typescript中extends關(guān)鍵字的基本使用

extends表示具體的泛型類型只能是object類型,某個變量如果能斷言成object類型[變量as object],那么這個變量的類型符合T extends object,下面這篇文章主要給大家介紹了關(guān)于Typescript中extends關(guān)鍵字基本使用的相關(guān)資料,需要的朋友可以參考下

2022-08-08