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和CSS速查手册
Aug 20 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
Angular 路由route实例代码
Jul 12 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python比较两个列表大小的方法
2015/07/11 Python
你应该知道的python列表去重方法
2017/01/17 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python 列表降维的实例讲解
2018/06/28 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
市场营销职业生涯规划书范文
2014/01/12 职场文书
诉前财产保全担保书
2014/05/20 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
生产操作工岗位职责
2014/09/16 职场文书
四年级学生期末评语
2014/12/26 职场文书
商务代表岗位职责
2015/02/15 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js