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 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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不用正则采集速度探究总结
2008/03/24 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python实现的希尔排序算法实例
2015/07/01 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
副总经理工作职责
2013/11/28 职场文书
厂区绿化方案
2014/05/08 职场文书
七一建党日演讲稿
2014/09/05 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年稽查工作总结
2014/12/20 职场文书
团代会开幕词
2015/01/28 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript