JS預覽圖像將本地圖片顯示到瀏覽器上
更新時間：2013年08月25日 13:35:53 作者：
本代碼從file域獲取本地圖片url并將本地圖片顯示到瀏覽器上，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
復制代碼 代碼如下:
<!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>
相關文章
本文給大家談一下如何優(yōu)化async代碼，更充分的利用異步事件流杜絕濫用async，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
一句話控制框架的刷新2008-08-08
很多朋友需要使用到cookies操作，腳本之家以前也發(fā)表了不少相關的文章。這篇文章，雖然亂了點，但知識點比較多。2010-07-07
JavaScript?內(nèi)置對象?BigInt詳細解析
這篇文章主要介紹了JavaScript?內(nèi)置對象?BigInt詳細解析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
js中for...in循環(huán)對象時輸出key值順序混亂問題解決
很久之前就有前輩告訴我用for...in循環(huán)對象屬性的順序不是固定的,xiam?這篇文章主要給大家介紹了關于js中for...in循環(huán)對象時輸出key值順序混亂問題解決方法,需要的朋友可以參考下2023-11-11
下面小編就為大家?guī)硪黄昝澜鉀QIE9瀏覽器出現(xiàn)的對象未定義問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了ES6基礎之展開語法(Spread syntax)，主要介紹了擴展語法的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
我們在開發(fā)中常遇到一種情況,在創(chuàng)建一個元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關于js為新添加元素添加綁定事件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JS調(diào)用打印機功能的方法,結(jié)合完整實例形式分析了javascript打印機功能的相關設置與使用技巧,需要的朋友可以參考下2016-11-11