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的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
js获取页面description的方法
2015/05/21 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Django实现随机图形验证码的示例
2020/10/15 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年学习部工作总结
2014/11/12 职场文书
瘦西湖导游词
2015/02/03 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS