发布于 2016-09-25 07:16:12 | 193 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


图片上传预览,就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果,关于这个效果我一直认为是无法做到的
今天用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> 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务