File文件控件,选中文件(图片,flash,视频)即立即预览显示


Posted in Javascript onApril 09, 2009

我们平常用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>
Javascript 相关文章推荐
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 #Javascript
常用简易JavaScript函数
Apr 09 #Javascript
javascript fullscreen全屏实现代码
Apr 09 #Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 #Javascript
javascript RadioButtonList获取选中值
Apr 09 #Javascript
Cookie 注入是怎样产生的
Apr 08 #Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 #Javascript
You might like
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python日志模块logging基本用法分析
2018/08/23 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
自荐信怎么写好
2013/11/11 职场文书
银行实习生的自我评价
2013/12/09 职场文书
吨的认识教学反思
2014/04/27 职场文书
数控机床专业自荐信
2014/05/19 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
庆七一主持词
2015/06/29 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
工程主管竞聘书
2015/09/15 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle