純JS實(shí)現(xiàn)本地圖片預(yù)覽的方法

更新時(shí)間：2015年07月31日 12:23:01 作者：ZongLiang

這篇文章主要介紹了純JS實(shí)現(xiàn)本地圖片預(yù)覽的方法,基于javascript插件實(shí)現(xiàn)本地圖片預(yù)覽功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了純JS實(shí)現(xiàn)本地圖片預(yù)覽的方法。分享給大家供大家參考。具體如下：

剛突然看到，網(wǎng)上已經(jīng)有很多類似的代碼，但沒找到一個(gè)合適的。就拿自己以前寫的寫了一個(gè)。代碼比較簡(jiǎn)潔，引用了一個(gè)我之前寫的js.方法可以單獨(dú)剝離出來使用，未測(cè)太多兼容。本機(jī)瀏覽器基本都支持（IE，F(xiàn)F，Chrome）

index.html如下：

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="js/z.js"></script>
</head>
<body>
<center>
  <img id="img" src="" /><p />
  <input type="file" id="file" />
</center>
<script>
  z.plimg(z.$('file'),z.$('img'),function(file,img,url){
    alert(url);
  });
</script>
</body>
</html>

z.js點(diǎn)擊此處本站下載。

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

您可能感興趣的文章:

相關(guān)文章

js es6系列教程 - 新的類語法實(shí)戰(zhàn)選項(xiàng)卡(詳解)
下面小編就為大家?guī)硪黄猨s es6系列教程 - 新的類語法實(shí)戰(zhàn)選項(xiàng)卡(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
bootstrap-table后端分頁(yè)功能完整實(shí)例
這篇文章主要介紹了bootstrap-table后端分頁(yè)功能,結(jié)合完整實(shí)例形式分析了bootstrap-table后端請(qǐng)求、數(shù)據(jù)分頁(yè)功能具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
微信小程序?qū)崿F(xiàn)復(fù)選框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)復(fù)選框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
javascript動(dòng)態(tài)判斷html元素并執(zhí)行不同的操作
在javascript中對(duì)觸發(fā)事件的元素進(jìn)行判斷，然后執(zhí)行不同的操作，下面是具體的實(shí)現(xiàn)，需要的朋友可以學(xué)習(xí)下
2014-06-06
layer擴(kuò)展打開/關(guān)閉動(dòng)畫的方法
今天小編就為大家分享一篇layer擴(kuò)展打開/關(guān)閉動(dòng)畫的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
詳解JavaScript引擎V8執(zhí)行流程
本文主要講解的是V8的技術(shù)，是V8的入門篇，主要目的是了解V8的內(nèi)部機(jī)制，希望對(duì)前端，快應(yīng)用，瀏覽器，以及nodejs同學(xué)有些幫助。這里不涉及到如何編寫優(yōu)秀的前端，只是對(duì)JS內(nèi)部引擎技術(shù)的講解
2021-06-06
一些相見恨晚的 JavaScript 技巧
本文從7個(gè)方面講述 JavaScript 中那些你不很熟知但非常實(shí)用的技巧。
2010-04-04
ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)，通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回，感興趣的朋友一起來學(xué)習(xí)
2015-08-08
JavaScript字符串操作的四個(gè)實(shí)用技巧
在制作前端頁(yè)面的過程中,經(jīng)常需要用到JavaScript進(jìn)行邏輯處理,很多時(shí)候都需要對(duì)字符串進(jìn)行操作,這篇文章主要給大家介紹了關(guān)于JavaScript字符串操作的四個(gè)實(shí)用技巧,需要的朋友可以參考下
2021-07-07
原生Javascript實(shí)現(xiàn)五角星評(píng)分
這篇文章主要為大家詳細(xì)介紹了原生Javascript實(shí)現(xiàn)五角星評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09