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 面向对象编程  function是方法(函数)
Sep 17 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Vuex入门到上手教程
Jun 20 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
axios异步提交表单数据的几种方法
Aug 11 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.ini中文版(2)
2006/10/09 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2014年店长工作总结
2014/11/17 职场文书
安全保证书
2015/01/16 职场文书
2016年寒假见闻
2015/10/10 职场文书
物业管理交接协议书
2016/03/24 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书