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 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
Javascript的this用法
Jan 16 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
JS中的多态实例详解
Oct 15 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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
汉字转化为拼音(php版)
2006/10/09 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
jquery 图片轮换效果
2010/07/29 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js获取class的所有元素
2013/03/28 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
详解Python中的文件操作
2016/08/28 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
档案管理员岗位职责
2013/12/01 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
介绍信样本
2015/01/31 职场文书
邀请书模板
2015/02/02 职场文书
蜗居观后感
2015/06/11 职场文书
夏洛特的网观后感
2015/06/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript