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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
jquery插件之easing使用
Aug 19 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue实例中data使用return包裹的方法
Aug 27 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
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php设置编码格式的方法
2013/03/05 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery使用手册之 事件处理
2007/03/24 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jquery radio 操作代码
2011/03/16 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Nodejs模块载入运行原理
2018/02/23 NodeJs
vuex直接赋值的三种方法总结
2018/09/16 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
商家认证委托书格式
2014/10/16 职场文书
怎样写工作总结啊!
2019/06/18 职场文书