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
>
查看全文
相关阅读:
IE浏览器Ajax缓存问题小结
2015第50周二
2015第50周一了解微服务架构
2015第49周日
2015第49周六
2015第49周五
2015第49周四
2015第49周三
0当执行游戏xc000007b错误的解决方法
微软的最高市值是多少?
原文地址:https://www.cnblogs.com/ghd258/p/290031.html
最新文章
7. ExtJS.form中msgTarget
6. extjs panel layoutconfig属性
5. extjs 中buttonAlign什么意思
4. extjs中form中的frame:true表示什么
3.ExtJs常用布局--layout详解(含实例)
2. Ext中关于Ext.QuickTips.init()的使用
1.Ext.onReady详解
maven项目没有错,但是在项目头上有红叉的解决方法
Codeforces 432E Square Tiling(结构体+贪婪)
Java 执行四则运算
热门文章
C++ 操作 MySQL
二十7天 春雨滋润着无形 —Spring依赖注入
Qt 3D研究(九):尝试第二边缘检测方法
Cocos2d-x 3.2 大富翁游戏项目开发-第七部分 获取角色路径_1
Android他们控制的定义(一)
POJ3279 Catch That Cow(BFS)
dpdk组态 千兆网卡 驱动 失败 原因分析及 解决方案
中关村,舌头
2015第50周五
2015第50周四
Copyright © 2011-2022 走看看