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 相关文章推荐
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
深入学习JavaScript中的bom
May 27 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
小程序表单认证布局及验证详解
Jun 19 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
JS 树形递归实例代码
2010/05/18 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
JS常用知识点整理
2017/01/21 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Django之模型层多表操作的实现
2019/01/08 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python代码中怎么换行
2020/06/17 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
党的生日活动方案
2014/08/15 职场文书
大学生求职意向书
2015/05/11 职场文书
早会开场白台词大全
2015/06/01 职场文书