File文件控件,选中文件(图片,flash,视频)即立即预览显示

我们平常用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>

(0)

相关推荐

  • File文件控件,选中文件(图片,flash,视频)即立即预览显示

    我们平常用file文件控件上传文件,要预览有时会刷新页面,结果file控件被清空,好多人问能能让他不清空或重新赋值,因为处于安全性的考虑,这是不可能的.那怎么进行无刷新预览呢?这里我把我所使用的方法写一下. 选择页面:  复制代码 代码如下: <script language="javascript"> function checkData() { var fileName=document.getElementById("FileUp").value;

  • Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例

    效果DEMO:http://www.never-online.net/tutorial/js/upload/Javascript & DHTML 实例编程(教程)(三),初级实例篇-上传文件控件实例上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解

  • 在GridControl控件上绑定图片的几种操作方式详解

    我们知道,基于DevExpress的开发Winform的项目界面的时候,GridControl控件是经常用来绑定数据的,一般以常规的字符内容为主,有时候也会有图片的显示需要,那么如果显示图片,我们应该如何实现呢?本篇随笔介绍基于原生GridControl控件的图片绑定显示操作和基于我封装的分页控件(封装GridControl的分页控件)两种图片绑定显示的操作. 1.基于原生的GridControl控件图片绑定 绑定图片,一般我们可以在单元格里面绑定byte[]类型或者Image类型,那么控件就会

  • Android编程实现GridView控件点击图片变暗效果的方法

    本文实例讲述了Android编程实现GridView控件点击图片变暗效果的方法.分享给大家供大家参考,具体如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); grid = (GridView) findViewById(R.id.grid); grid.setAdapte

  • C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法

    本文实例讲述了C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法.分享给大家供大家参考,具体如下: 在Winform中如果将一个透明图片放在窗体上能正常显示透明,但是如果将该图片放在另一个控件上会导致不能显示透明效果. 解决这种情况,可以采取在控件上使用GDI+绘画出透明图片. 这里我们就以一个pictureBox2控件上面重叠一张png透明图片为例: 我们只需要给pictureBox2控件添加Paint事件,然后对png透明图片进行绘制即可,代码如下: private voi

  • .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图 如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2前台页面编写

  • jquery实现图片上传前本地预览

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

  • JS验证图片格式和大小并预览的简单实例

    实例如下: function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024; var fileType; var fileSize; var filePath; if (obj.files) { // webkit, mozilla... (jq:$.sup

  • layui实现图片虚拟路径上传,预览和删除的例子

    效果如下所示: 前端: <style type="text/css"> #detailTbody tr:hover { background: #fff; } .layui-form-label { width: 110px; } .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; margin-top: -25px; background-color: blac

  • Nodejs实现图片上传、压缩预览、定时删除功能

    前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

随机推荐