<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

效果預(yù)覽

效果圖：

以上這篇如何通過js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JS非行間樣式獲取函數(shù)的實(shí)例代碼
這篇文章主要介紹了JS非行間樣式獲取函數(shù)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
JavaScript分析、壓縮工具JavaScript Analyser
這篇文章主要介紹了JavaScript分析、壓縮工具JavaScript Analyser,需要的朋友可以參考下
2014-12-12
Ionic2調(diào)用本地SQlite實(shí)例
這篇文章主要介紹了Ionic2調(diào)用本地SQlite實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
JS實(shí)現(xiàn)六位字符密碼輸入器功能
這篇文章主要介紹了JS實(shí)現(xiàn)六位字符密碼輸入器功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
Vue考試系統(tǒng)的后臺管理功能開發(fā)示例解讀
這篇文章主要介紹了Vue考試系統(tǒng)后臺管理項(xiàng)目的登錄、記住密碼功能具體實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-09-09
js實(shí)現(xiàn)帶搜索功能的下拉框
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)到搜索的下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
JS多個(gè)表單數(shù)據(jù)提交下的serialize()應(yīng)用實(shí)例分析
這篇文章主要介紹了JS多個(gè)表單數(shù)據(jù)提交下的serialize()應(yīng)用,接合實(shí)例形式分析了原生javascript實(shí)現(xiàn)多個(gè)表單提交時(shí)serialize操作相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-08-08
一文總結(jié)JavaScript中常見的設(shè)計(jì)模式
在程序設(shè)計(jì)中有很多實(shí)用的設(shè)計(jì)模式，而其中大部分語言的實(shí)現(xiàn)都是基于“類”。在程序設(shè)計(jì)中有很多實(shí)用的設(shè)計(jì)模式，而其中大部分語言的實(shí)現(xiàn)都是基于“類”。，本文將總結(jié)了JavaScript中常見的十五種設(shè)計(jì)模式，感興趣的朋友可以參考下
2023-05-05
JavaScript函數(shù)節(jié)流和函數(shù)防抖之間的區(qū)別
本文主要介紹了JavaScript函數(shù)節(jié)流和函數(shù)防抖之間的區(qū)別。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02