javascript实现上传图片并预览的效果实现代码


Posted in Javascript onApril 11, 2011

今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数,滤镜将不会作用。

<!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/网页特效" 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>

实例二、同时兼容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'; 
// 下面代码用来获得图片尺寸,这样才能在ie下正常显示图片 
document.getelementbyid('box').innerhtml 
= "<img width='"+image.width+"' height='"+image.height+"' id='apic' src='"+picpath+"'>"; 
} 
// show view button 
function buttonshow() 
{ 
/* 
这里用来解决图片加载延时造成的预览失败. 
简单说明一下,当image对象的src属性发生改变时javascript会重新给image装载图片内容, 
这通常是需要一些时间的,如果在加载完成之前想将图片显示出来就会造成错误,所以我们 
通过图片的宽度和高度来判断图片是否已经被成功加载,加载完毕才会显示预览按钮. 
这里我仍然有一个困惑,在ie7下预览效果偶尔会失效. 
*/ 
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下取得的是图片的数据 
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>
Javascript 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
TypeScript入门-接口
Mar 30 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
window.dialogArguments 使用说明
Apr 11 #Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 #Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 #Javascript
基于jquery的监控数据是否发生改变
Apr 11 #Javascript
jQuery实战之品牌展示列表效果
Apr 10 #Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 #Javascript
JQuery优缺点分析说明
Apr 10 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php实现数字补零的方法总结
2018/09/12 PHP
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
使用angular写一个hello world
2015/01/23 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Python中的日期时间处理详解
2016/11/17 Python
python语言中with as的用法使用详解
2018/02/23 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python如何将字符串转换为日期
2020/07/31 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
建筑自我鉴定
2013/10/19 职场文书
小学门卫岗位职责
2013/12/17 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
自我介绍演讲稿
2014/01/15 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
留学顾问岗位职责
2014/04/14 职场文书
文体活动总结范文
2014/05/05 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
优秀班组长事迹
2014/05/31 职场文书
首次购房证明
2015/06/19 职场文书
货款欠条范本
2015/07/03 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
详解SQL报错盲注
2022/07/23 SQL Server
源码安装apache脚本部署过程详解
2022/09/23 Servers