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

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

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

今天用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)頁(yè)特效" 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'; 
// 下面代碼用來(lái)獲得圖片尺寸，這樣才能在ie下正常顯示圖片 
document.getelementbyid('box').innerhtml 
= "<img width='"+image.width+"' height='"+image.height+"' id='apic' src='"+picpath+"'>"; 
} 
// show view button 
function buttonshow() 
{ 
/* 
這里用來(lái)解決圖片加載延時(shí)造成的預(yù)覽失敗. 
簡(jiǎn)單說(shuō)明一下，當(dāng)image對(duì)象的src屬性發(fā)生改變時(shí)javascript會(huì)重新給image裝載圖片內(nèi)容， 
這通常是需要一些時(shí)間的，如果在加載完成之前想將圖片顯示出來(lái)就會(huì)造成錯(cuò)誤，所以我們 
通過(guò)圖片的寬度和高度來(lái)判斷圖片是否已經(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> 