发布于 2016-12-15 07:46:07 | 15 次阅读 | 评论: 0 | 来源: 网友投递

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

JavaScript客户端脚本语言

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


非常不错的File文件控件,图片,flash,视频都可以立即显示,推荐使用。
我们平常用file文件控件上传文件,要预览有时会刷新页面,结果file控件被清空,好多人问能能让他不清空或重新赋值,因为处于安全性的考虑,这是不可能的。那怎么进行无刷新预览呢?这里我把我所使用的方法写一下。
选择页面: 

<script language="javascript"> 
function checkData() 
{ 
var fileName=document.getElementById("FileUp").value; 
if(fileName=="") 
return; 
//检查文件类型 
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase() 
if(exName=="JPG"||exName=="BMP"||exName=="GIF") 
{ 
//document.getElementById("myimg").src=fileName; 
document.getElementById("previewImage").innerHTML='<img src=\''+fileName+'\' width=100 height=100 >'; 
} 
else 
if(exName=="SWF") 
{ 
document.getElementById("previewImage").innerHTML='<embed src=\''+fileName+'\' width=\'100\' height=\'100\' quality=\'high\' bgcolor=\'#f5f5f5\' ></embed>'; 
} 
else 
if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI") 
{ 
var strcode='<embed src=\''+fileName+'\' border=\'0\' width=\'100\' height=\'100\' quality=\'high\' '; 
strcode+=' autoStart=\'1\' playCount=\'0\' enableContextMenu=\'0\' type=\'application/x-mplayer2\'></embed>'; 
document.getElementById("previewImage").innerHTML=strcode; 
} 
else 
{ 
alert("请选择正确的图片文件"); 
document.getElementById("FileUp").value=""; 
} 
} 
function openwin() 
{ 
window.open("addPreview.aspx","","height=300,width=345,top=100,left=100"); 
} 
</script>

HTML代码:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" ID="Table1"> 
<tr> 
<td width="255" height="100%" valign="middle"> 
<INPUT id="FileUp" style="WIDTH: 253px; HEIGHT: 22px" type="file" size="23" name="File1" 
runat="server" onchange="checkData()"><br> 
注:这里可以是图片(jpg或gif格式),flash动画(swf)及视频文件(wmv,mpeg,asf,avi)。大小限定在1M以内。 
</td> 
<td> 
<div id="previewImage">当前页预览</div> 
</td> 
</tr> 
</table> 

弹出预览页面:

<script language="javascript"> 
function getstr() 
{ 
var strcode=""; 
var width=100; 
var high=100; 
if(self.opener.document.getElementById("FileUp")!=null) 
{ 
//strcode=self.opener.document.getElementById("previewImage").innerHTML; 
width=self.opener.document.getElementById("lblWidth").innerText; 
high=self.opener.document.getElementById("lblHigh").innerText; 
var fileName=self.opener.document.getElementById("FileUp").value; 
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase() 
if(exName=="JPG"||exName=="BMP"||exName=="GIF") 
{ 
//document.getElementById("myimg").src=fileName; 
strcode='<img src=\''+fileName+'\' width='+width+' height='+high+' >'; 
} 
else 
if(exName=="SWF") 
{ 
strcode='<embed src=\''+fileName+'\' width=\''+width+'\' height=\''+high+'\' quality=\'high\' ></embed>'; 
} 
else 
if(exName=="WMV"||exName=="MPEG"||exName=="ASF"||exName=="AVI") 
{ 
strcode='<embed src=\''+fileName+'\' border=\'0\' width=\''+width+'\' height=\''+high+'\' quality=\'high\' '; 
strcode+=' autoStart=\'1\' playCount=\'0\' enableContextMenu=\'0\' type=\'application/x-mplayer2\'></embed>'; 
} 
} 
if(self.opener.document.getElementById("txtADCode")!=null) 
{ 
strcode=self.opener.document.getElementById("txtADCode").innerHTML; 
} 
if(strcode!="") 
{ 
//window.alert(fileName); 
document.getElementById("showimg").innerHTML=strcode; 
} 
} 
</script> 

显示:

<div id="showimg"></div> 


相关阅读 :
File文件控件,选中文件(图片,flash,视频)即立即预览显示
转一个日期输入控件,支持FF
图片上传判断及预览脚本的效果实例
file控件选择上传文件确定后触发的js事件是哪个
javascript实现校验文件上传控件实例
自制的文件上传JS控件可支持IE、chrome、firefox etc
使用透明效果来自定义文件上传按钮控件样式
fileupload控件 文件类型客户端验证实现代码
设置点击文本框或图片弹出日历控件的实现代码
解析使用JS 清空File控件的路径值
使用JS 清空File控件的路径值
js如何获取file控件的完整路径具体实现代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

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