JS預(yù)覽圖像將本地圖片顯示到瀏覽器上
更新時(shí)間：2013年08月25日 13:35:53 作者：
本代碼從file域獲取本地圖片url并將本地圖片顯示到瀏覽器上，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/**
* 從 file 域獲取 本地圖片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
/**
* 將本地圖片 顯示到瀏覽器上
*/
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
</form>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
本文給大家談一下如何優(yōu)化async代碼，更充分的利用異步事件流杜絕濫用async，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
一句話控制框架的刷新2008-08-08
很多朋友需要使用到cookies操作，腳本之家以前也發(fā)表了不少相關(guān)的文章。這篇文章，雖然亂了點(diǎn)，但知識(shí)點(diǎn)比較多。2010-07-07
JavaScript?內(nèi)置對(duì)象?BigInt詳細(xì)解析
這篇文章主要介紹了JavaScript?內(nèi)置對(duì)象?BigInt詳細(xì)解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
js中for...in循環(huán)對(duì)象時(shí)輸出key值順序混亂問(wèn)題解決
很久之前就有前輩告訴我用for...in循環(huán)對(duì)象屬性的順序不是固定的,xiam?這篇文章主要給大家介紹了關(guān)于js中for...in循環(huán)對(duì)象時(shí)輸出key值順序混亂問(wèn)題解決方法,需要的朋友可以參考下2023-11-11
完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-09-09
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
ES6基礎(chǔ)之展開(kāi)語(yǔ)法(Spread syntax)
這篇文章主要介紹了ES6基礎(chǔ)之展開(kāi)語(yǔ)法(Spread syntax)，主要介紹了擴(kuò)展語(yǔ)法的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
我們?cè)陂_(kāi)發(fā)中常遇到一種情況,在創(chuàng)建一個(gè)元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關(guān)于js為新添加元素添加綁定事件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JS調(diào)用打印機(jī)功能的方法,結(jié)合完整實(shí)例形式分析了javascript打印機(jī)功能的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2016-11-11