JS預(yù)覽圖像將本地圖片顯示到瀏覽器上
更新時間：2013年08月25日 13:35:53 作者：
本代碼從file域獲取本地圖片url并將本地圖片顯示到瀏覽器上，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
復(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)文章
FileReader主要用于將文件內(nèi)容讀入內(nèi)存,通過一系列異步接口,可以在主線程中訪問本地文件,這篇文章主要給大家介紹了關(guān)于JavaScript中FileReader的相關(guān)資料,需要的朋友可以參考下2022-03-03
JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實現(xiàn)方法
本文通過實例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下2017-06-06
JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例,本文用了多個例子來講解arguments的使用,需要的朋友可以參考下2014-08-08
老司機(jī)們，你知道JSON.stringify還有第二個和第三個可選參數(shù)嗎？它們是什么呢？是不是感到不可思議？下面這篇文章就來給大家介紹了一些你可能不知道的JSON.stringify的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
彈出新的網(wǎng)頁窗口的方法有很多，在本文為大家介紹下使用js的window.open方法來實現(xiàn)，需要的朋友可以了解下2014-01-01
這篇文章主要介紹了2013-12-12
微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實例 (真機(jī)可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實例 (真機(jī)可用)，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-12-12
JS實現(xiàn)窗口加載時模擬鼠標(biāo)移動的方法
這篇文章主要介紹了JS實現(xiàn)窗口加載時模擬鼠標(biāo)移動的方法,涉及javascript鼠標(biāo)事件的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序wxs實現(xiàn)吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了原生js一行代碼實現(xiàn)簡易輪播圖功能，本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-06-06