zoukankan
html css js c++ java
File文件控件,选中文件(图片,flash,视频)即立即预览显示
继续总结项目里的一些小TIP,我们平常用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
>
上传图片时实现即时预览
解决方法:
<
script
language
="javascript"
>
function
showimg()
{
document.all(
"
image1
"
).src
=
document.all(
"
upfile
"
).value;
}
</
script
>
…… ……
<
input
type
="file"
id
="upfile"
name
="upfile"
runat
="server"
onpropertychange
="showimg()"
>
<
asp:Image
id
="Image1"
style
="…… ……"
runat
="server"
></
asp:Image
>
查看全文
相关阅读:
kvm虚拟化
kvm虚拟机管理
认识佛教
【书籍推荐】《自我观察:第四道入门手册》爱自己
[推荐] 自我观察的四个基本原则
只要你真会念,念到不起心、不动念、不分别、不执着,六根接触六尘境界就是修行
胡小林老师最新答问(全两集)2017年3月9日发布
蔡礼旭老师:如何经营幸福生活(武汉万人论坛)
新视频】蔡礼旭老师:学圣贤教诲 改人生命运(2013年北京论坛)附下载
【论坛先河,载入史册】陈大惠、钟茂森、胡小林、蔡礼旭、彭鑫老师同台答问(全三集)
原文地址:https://www.cnblogs.com/ghd258/p/290031.html
最新文章
Vmware9.0打开早期版本报错:this virtual machine’s policies are too old to be run by this version of vmware workstation”
Remove WebCakeDesktop
The trap of Bash trap
Visualizing the Git data model
Product and Sum in Category Theory
Converting Recursive Traversal to Iterator
Monad Explained in One Picture
Stateful Future Transformation
Function Composition vs Object Composition
Distributed MVCC Based Cross-row Transaction
热门文章
A Beginner's Guide to Paxos
Functional Programming without Lambda
Ubuntu18.04/20.04 安装深度截图和录屏软件 并配置截图快捷键
Ubuntu Docky图标填坑
VirtualBox虚拟机压缩磁盘以回收未使用的空间
VirtualBox之Cannot register the hard disk添加复制的磁盘错误问题解决
Centos7.6使用命令行配置802.1Q VLAN 标记或网卡子接口
[KVM] 网络虚拟化原理
ubuntu 16.04 环境下实践 VLAN
kvm虚拟迁移
Copyright © 2011-2022 走看看