無刷新預(yù)覽所選擇的圖片示例代碼
更新時間：2014年04月02日 16:57:50 作者：
這篇文章主要介紹了無刷新預(yù)覽所選擇的圖片的具體實現(xiàn),需要的朋友可以參考下
代碼如下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript">
//本地圖片預(yù)覽
function setImagePreview(fieldupload, image, imagediv) {
var docObj = document.getElementById(fieldupload);
var imgObjPreview = document.getElementById(image);
if (docObj.files && docObj.files[0]) {
//火狐下，直接設(shè)img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '150px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById(imagediv);
//必須設(shè)置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "150px";
//圖片異常的捕捉，防止用戶修改后綴來偽造圖片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<div id="localImag"> <img id="preview" width="150px" height="150px" src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif" alt="" /></div>
<div>
<input type="file" onchange="javascript:setImagePreview('upload','preview','localImag');" id="upload" />
</div>
</body>
</html>
相關(guān)文章
利用JavaScript實現(xiàn)簡單全選和全不選的思路和方法
最近開始練習(xí)js的基本操作,常常因為一些小疏忽導(dǎo)致頁面效果無法實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于利用JavaScript實現(xiàn)簡單全選和不全選的思路和方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
為原生js Array增加each方法，通過prototype來增加功能，進(jìn)行擴(kuò)展2012-04-04
索趣科技的答案...2007-02-02
一文帶你掌握J(rèn)avaScript中Moment.js如何操作日期和時間
Moment.js是一個極其強(qiáng)大的JavaScript庫,專門用于解析、驗證、操作和顯示日期和時間,下面就跟隨小編一起學(xué)習(xí)一下Moment.js的具體使用吧2024-01-01
js動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼
最近做項目遇到這樣的需求，要求表格添加一行，表格刪除一行，表格遍歷取值等。下面小編給大家?guī)砹薺s動態(tài)添加表格逐行添加、刪除、遍歷取值的實例代碼，需要的朋友參考下2018-01-01
微信小程序?qū)崿F(xiàn)動態(tài)顯示和隱藏某個控件功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)顯示和隱藏某個控件功能,涉及微信小程序事件響應(yīng)及樣式動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了基于JS實現(xiàn)省市聯(lián)動效果代碼的相關(guān)資料,非常實用，在日常項目開發(fā)過程中經(jīng)常遇到此需求，下面小編給大家分享實現(xiàn)代碼，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了Openlayers實現(xiàn)地圖全屏顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
bootstrap multiselect 多選功能實現(xiàn)方法
這篇文章主要介紹了bootstrap multiselect 多選功能實現(xiàn)方法,需要的朋友可以參考下2017-06-06
Javascript的動態(tài)增加類的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動態(tài)增加類的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10