快捷導(dǎo)航

如何通過js實現(xiàn)圖片預(yù)覽功能【附實例代碼】

更新時間：2016年03月30日 16:33:40 投稿：jingxian

如何通過js實現(xiàn)圖片預(yù)覽功能呢？下面小編就為大家?guī)硪黄胘s實現(xiàn)圖片預(yù)覽功能。給大家做個參考吧，一起跟隨小編過來看看

實現(xiàn)代碼：

<!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實現(xiàn)圖片預(yù)覽功能【附實例代碼】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

用headjs來管理和加載js 提高網(wǎng)站加載速度
headjs其實是一整套的工具，本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下
2016-11-11
禁用鍵盤上的(全局)指定鍵兼容iE、Chrome、火狐
確定你是要禁用全局的還是指定控件，如果是全局的就只要監(jiān)聽window.keyDown = function(event){.....} 一樣一樣的，感興趣的朋友可以了解下哈
2013-05-05
js 翻轉(zhuǎn)顏色實現(xiàn)代碼
將#ffffff轉(zhuǎn)換成rgb(0,0,0)格式的顏色代碼，需要的朋友可以參考下。
2010-03-03
javascript window.confirm確認(rèn) 取消對話框?qū)崿F(xiàn)代碼小結(jié)
本文章講述的三種都是基于了javascript confirm提示確認(rèn)框的做法了，只是在不同的地方寫哦，有需要的同學(xué)可參考一下
2012-10-10
JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解
這篇文章主要為大家介紹了JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
javascript讀取xml
javascript讀取xml...
2006-11-11
微信小程序?qū)崿F(xiàn)登錄遮罩效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄遮罩效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
js彈出對話框方式小結(jié)
這篇文章主要介紹了js彈出對話框方式,結(jié)合大量實例總結(jié)分析了JavaScript常用的彈出對話框的實現(xiàn)技巧與相關(guān)函數(shù)的具體使用方法,需要的朋友可以參考下
2015-11-11
firefox和IE系列的相關(guān)區(qū)別整理以備后用
firefox和IE系列的相關(guān)區(qū)別整理，整理相對來說還可以，但對于個別細(xì)節(jié)的處理不夠完善。具體的可以參考腳本*之家以前發(fā)布的文章。
2009-12-12
Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實例代碼
本文通過實例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-06-06