快捷導(dǎo)航

javascript實(shí)現(xiàn)上傳圖片并預(yù)覽的效果實(shí)現(xiàn)代碼

更新時(shí)間：2011年04月11日 23:58:32 作者：

圖片上傳預(yù)覽，就是在使用文件選擇框選擇了文件之后就可以在頁面上看見圖片的效果，關(guān)于這個(gè)效果我一直認(rèn)為是無法做到的

今天用alphaimageloader濾鏡的src屬就是其中的主角它將使用絕對(duì)或相對(duì)url地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。

 
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.3ppt.com /"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title></title> 
<style type="text/css教程"> 
#picshow 
{ 
filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale); 
width:88px; 
height:125px; 
} 
</style> 
<script type="text/網(wǎng)頁特效" language="javascript"> 
<!-- 
function upimg(imgfile) 
{ 
var picshow = document.getelementbyid("picshow"); 
picshow.filters.item("dximagetransform.microsoft.alphaimageloader").src = imgfile.value; 
picshow.style.width = "88px"; 
picshow.style.height = "125px"; 
} 
--> 
</script> 
</head> 
<body> 
<div id="picshow"></div> 
<p>選擇圖片：<input type="file" size="20" onchange="upimg(this);" /></p> 
</body> 
</html> 

實(shí)例二、同時(shí)兼容ie6,ie7,ie8和 firefox。

復(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" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script> 
var picpath; 
var image; 
// preview picture 
function preview() 
{ 
document.getelementbyid('preview').style.display = 'none'; 
// 下面代碼用來獲得圖片尺寸，這樣才能在ie下正常顯示圖片 
document.getelementbyid('box').innerhtml 
= "<img width='"+image.width+"' height='"+image.height+"' id='apic' src='"+picpath+"'>"; 
} 
// show view button 
function buttonshow() 
{ 
/* 
這里用來解決圖片加載延時(shí)造成的預(yù)覽失敗. 
簡單說明一下，當(dāng)image對(duì)象的src屬性發(fā)生改變時(shí)javascript會(huì)重新給image裝載圖片內(nèi)容， 
這通常是需要一些時(shí)間的，如果在加載完成之前想將圖片顯示出來就會(huì)造成錯(cuò)誤，所以我們 
通過圖片的寬度和高度來判斷圖片是否已經(jīng)被成功加載，加載完畢才會(huì)顯示預(yù)覽按鈕. 
這里我仍然有一個(gè)困惑，在ie7下預(yù)覽效果偶爾會(huì)失效. 
*/ 
if ( image.width == 0 || image.height == 0 ) { 
settimeout(buttonshow, 1000); 
} else { 
document.getelementbyid('preview').style.display = 'block'; 
} 
} 
function loadimage(ele) { 
picpath = getpath(ele); 
image = new image(); 
image.src = picpath; 
settimeout(buttonshow, 1000); 
} 
function getpath(obj) 
{ 
if(obj) 
{ 
//ie 
if (window.navigator.useragent.indexof("msie")>=1) 
{ 
obj.select(); 
// ie下取得圖片的本地路徑 
return document.selection.createrange().text; 
} 
//firefox 
else if(window.navigator.useragent.indexof("firefox")>=1) 
{ 
if(obj.files) 
{ 
// firefox下取得的是圖片的數(shù)據(jù) 
return obj.files.item(0).getasdataurl(); 
} 
return obj.value; 
} 
return obj.value; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" name="pic" id="pic" onchange='loadimage(this)' /> 
<input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'> 
<div id='box'></div> 
</body> 
</html> 