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 Date对象使用总结
May 14 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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技巧与注意事项分析
2011/02/03 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
jquery 快速回到页首的方法
2013/12/05 Javascript
js图片预加载示例
2014/04/30 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python异常处理总结
2014/08/15 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
windows下python安装pip图文教程
2018/05/25 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
矫正人员思想汇报
2014/01/08 职场文书
教师求职自荐书
2014/06/14 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
数学备课组工作总结
2015/08/12 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers