javascript實(shí)現(xiàn)上傳圖片并預(yù)覽的效果實(shí)現(xiàn)代碼
更新時(shí)間:2011年04月11日 23:58:32 作者:
圖片上傳預(yù)覽,就是在使用文件選擇框選擇了文件之后就可以在頁(yè)面上看見(jiàn)圖片的效果,關(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。
<!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>
復(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.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>
您可能感興趣的文章:
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- js圖片上傳前預(yù)覽功能(兼容所有瀏覽器)
- js實(shí)現(xiàn)圖片上傳預(yù)覽原理分析
- js 上傳圖片預(yù)覽問(wèn)題
- 圖片上傳之前檢查大小、尺寸、格式并預(yù)覽的js代碼
- javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能示例【兼容IE 9】
相關(guān)文章
uniapp中uni.request(OBJECT)接口請(qǐng)求封裝實(shí)例代碼
在開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)用到前端請(qǐng)求后端接口,每次的請(qǐng)求都會(huì)出現(xiàn)地址不一樣,參數(shù)不一樣,方式不一樣等等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中uni.request(OBJECT)接口請(qǐng)求封裝的相關(guān)資料,需要的朋友可以參考下2022-12-12Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js中常用的4種模糊查詢?cè)斀?includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品,所以模糊查詢和下拉匹配也成了前端必備的一個(gè)小技能,需要的朋友可以參考下2023-11-11基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作
這篇文章主要介紹了基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08