用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
更新時(shí)間：2007年03月15日 00:00:00 作者：
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img"); img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
}
}else{
alert("您選擇的似乎不是圖像文件。");
}}
</script>
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img"); img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
}
}else{
alert("您選擇的似乎不是圖像文件。");
}}
</script>
您可能感興趣的文章:
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- JS預(yù)覽圖像將本地圖片顯示到瀏覽器上
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- javascript IE7 瀏覽器本地圖片預(yù)覽
- 詳解nodejs實(shí)現(xiàn)本地上傳圖片并預(yù)覽功能（express4.0+）
- 原生js FileReader對(duì)象實(shí)現(xiàn)圖片上傳本地預(yù)覽效果
- JS中利用FileReader實(shí)現(xiàn)上傳圖片前本地預(yù)覽功能
- vue.js 實(shí)現(xiàn)圖片本地預(yù)覽 裁剪 壓縮 上傳功能
- JS實(shí)現(xiàn)的input選擇圖片本地預(yù)覽功能示例
- 基于JavaScript實(shí)現(xiàn)本地圖片預(yù)覽
- JavaScript實(shí)現(xiàn)預(yù)覽本地上傳圖片功能完整示例
相關(guān)文章
JS圖片放大效果簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片放大效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
js 遍歷json的方法有很多，在本文為大家詳細(xì)介紹下如何返回的map內(nèi)容，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了淺析JavaScript中的變量提升,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
下面小編就為大家?guī)?lái)一篇關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關(guān)知識(shí)，文中較詳細(xì)的給大家介紹了可以優(yōu)化的途徑,需要的朋友可以參考下2017-12-12
RGB轉(zhuǎn)換實(shí)現(xiàn)代碼，淘寶前端開(kāi)發(fā)工程師筆試題
寫(xiě)一個(gè)轉(zhuǎn)換RGB的值的函數(shù)，實(shí)現(xiàn)以下效果。2010-11-11
JavaScript實(shí)現(xiàn)簡(jiǎn)易的水印覆蓋功能
本文將簡(jiǎn)單實(shí)現(xiàn)一個(gè)覆蓋水印的小功能，水印一般都是添加在圖片上，然后直接加載處理過(guò)的圖片url即可，這里并沒(méi)有修改圖片，而是直接的在待添加水印的?dom?上添加一個(gè)?canvas?蒙版，需要的可以參考一下2022-12-12
這篇文章主要介紹了微信小程序JS加載esmap地圖的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
簡(jiǎn)單實(shí)現(xiàn)js浮動(dòng)框
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)js浮動(dòng)框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
如何手動(dòng)實(shí)現(xiàn)es5中的bind方法詳解
這篇文章主要給大家介紹了關(guān)于如何手動(dòng)實(shí)現(xiàn)es5中的bind方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12