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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue中的inject学习教程
Apr 24 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
用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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php随机输出名人名言的代码
2012/10/07 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
Python多进程编程技术实例分析
2014/09/16 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python 日期操作类代码
2018/05/05 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
材料物理专业个人求职信
2013/12/15 职场文书
应聘教师自荐书
2014/06/16 职场文书
学习考察心得体会
2014/09/04 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
档案管理员岗位职责
2015/02/12 职场文书
金榜题名主持词
2015/07/02 职场文书
早恋主题班会
2015/08/14 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL