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 toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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&amp;java(三)
2006/10/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
Vue实现多标签选择器
2019/11/28 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
Django中的Signal代码详解
2018/02/05 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python实现移位加密和解密
2019/03/22 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python3 map函数和filter函数详解
2019/08/26 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
销售心得体会
2014/01/02 职场文书
英文留学推荐信范文
2014/01/25 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
十八届三中全会感言
2014/03/10 职场文书
汽车维修求职信
2014/06/15 职场文书
文明单位创建材料
2014/12/24 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
idea下配置tomcat避坑详解
2022/04/12 Servers