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.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
用js实现博客打赏功能
Oct 24 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
vue+eslint+vscode配置教程
Aug 09 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
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
python插入排序算法实例分析
2015/07/03 Python
解决python线程卡死的问题
2019/02/18 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python numpy数组转置与轴变换
2019/11/15 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
天网面试题
2013/04/07 面试题
2014年幼儿园元旦活动方案
2014/02/13 职场文书
党支部特色活动方案
2014/08/20 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
英文投诉信格式
2015/07/03 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis