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
>
查看全文
相关阅读:
iOS----------如何检查域名是否支持ipv6
iOS----------Charts3.0集成(手动导入)
Cartfile学习参考博客
iOS---------Xcode中添加预编译pch文件
iOS ----------怎么修改xcode默认打开方式
iOS -----------Downloading core failed:
iOS----------导航栏的正确隐藏方式
iOS----------The app's Info.plist must contain an NSPhotoLibraryUsageDescription key
iOS--------获取当前连接的WiFi以及IP地址
【2020Python修炼记】网络编程(一)网络通信协议
原文地址:https://www.cnblogs.com/ghd258/p/290031.html
最新文章
Spring 注解
常用API——Math对象型、Number型
Date ——日期型函数Date常用API
js中的运算总结(未完待续
jacascript中的原型链以原型
报文格式:xml 、定长报文、变长报文
遍历map的方法
HTML5离线存储原理
css3:盒模型以及box-sizing属性
jQuery设置disabled属性
热门文章
【Linux】linux文件夹打包命令
【Shell】shell的运算
【Shell】shell截取字符串方式(cut、awk、sed命令)
用ping命令简单的测试 延时、抖动、丢包率
Linux 查看进程消耗内存情况总结
【防火墙】iptables查看、添加、删除规则
Linux下查看某个进程占用的CPU、内存
python实现查询的数据写入到excel
ubuntu系统操作
如何查看当前Ubuntu系统的版本
Copyright © 2011-2022 走看看