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 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
传智播客学习之JavaScript基础篇
Nov 13 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Vue SPA 首屏优化方案
2021/02/26 Vue.js
简析Python的闭包和装饰器
2016/02/26 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
python通过cython加密代码
2020/12/11 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
自我鉴定怎么写
2013/12/05 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
文化宣传方案
2014/03/13 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
综合实践活动总结
2014/05/05 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
入股协议书范本
2014/11/01 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP