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实现tab标签浏览效果
Feb 20 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
法院授权委托书格式
2014/09/28 职场文书
医院志愿者活动总结
2015/05/06 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书