欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ì)作用。
復(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)頁特效" 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>

相關(guān)文章

  • uniapp中uni.request(OBJECT)接口請(qǐng)求封裝實(shí)例代碼

    uniapp中uni.request(OBJECT)接口請(qǐng)求封裝實(shí)例代碼

    在開發(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-12
  • Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)

    Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)

    這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • js中常用的4種模糊查詢?cè)斀?includes()、indexOf()、search()、match())

    js中常用的4種模糊查詢?cè)斀?includes()、indexOf()、search()、match())

    這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品,所以模糊查詢和下拉匹配也成了前端必備的一個(gè)小技能,需要的朋友可以參考下
    2023-11-11
  • js實(shí)現(xiàn)翻牌小游戲

    js實(shí)現(xiàn)翻牌小游戲

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)翻牌小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • GoJs基本使用示例詳解

    GoJs基本使用示例詳解

    這篇文章主要為大家介紹了GoJs基本使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • JavaScript原生數(shù)組Array常用方法

    JavaScript原生數(shù)組Array常用方法

    在入門Vue時(shí), 列表渲染一節(jié)中提到數(shù)組的變異方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不屬于變異方法. 在這里就復(fù)習(xí)一下Array所提供的這幾個(gè)方法的使用
    2017-04-04
  • 基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作

    基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作

    這篇文章主要介紹了基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-08-08
  • Ubuntu 11.10 安裝Node.js的方法

    Ubuntu 11.10 安裝Node.js的方法

    Ubuntu 11.10 安裝Node.js的方法,需要的朋友可以參考下。
    2011-11-11
  • js實(shí)現(xiàn)詳情頁放大鏡效果

    js實(shí)現(xiàn)詳情頁放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)詳情頁放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • JavaScript中的函數(shù)式編程詳解

    JavaScript中的函數(shù)式編程詳解

    這篇文章主要介紹了JavaScript中的函數(shù)式編程詳解,需要的朋友可以參考下
    2020-08-08

最新評(píng)論