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 编写规范
Mar 03 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
javascript每日必学之循环
Feb 19 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
使用php+xslt在windows平台上
2006/10/09 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
SinaEditor使用方法详解
2013/12/28 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
什么是规则表达式
2012/05/03 面试题
应聘教师推荐信
2013/10/31 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
大班开学家长寄语
2014/04/04 职场文书
安全责任协议书
2014/04/21 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
小学生优秀评语
2014/12/29 职场文书
六五普法心得体会2016
2016/01/21 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers