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
>
查看全文
相关阅读:
21个高质量的Swift开源iOS App
浅谈 JavaScriptCore
开发完 iOS 应用,接下去你该做的事
Xcode8的调试技能Memory Graph 实战解决闭包引用循环问题
减肥App计划
在管理实际中,心态很重要,当你以欣赏的态度去看一件事,你便会看到许多优点,以批评的态度,你便会看到无数缺点。
怎样做才是一个独立自主的人?
《圣经、》箴言篇13.3
做事情需要坚持需要毅力更加需要观察和方法。(人生会遭遇许多事,其中很多是难以解决的,这时心中被盘根错结的烦恼纠缠住,茫茫然不知如何面对?如果能静下心來思考,往往会恍然大悟。 )
10000单词积累,从今天开始(待续)。。。
原文地址:https://www.cnblogs.com/ghd258/p/290031.html
最新文章
Linux命令行上执行操作,不退回命令行的解决方法
Git介绍
高并发处理方案
IDEA创建Maven项目
jackson annotations注解详解
捕获Chrome浏览器全屏退出事件
iOS10 推送必看 UNNotificationContentExtension
Objective-C 中 NULL、nil、Nil、NSNull 的定义及不同
走进 Realm 的世界
QRCode
热门文章
iOS 开发之内购 – AppStore
测试化工具XCTestCase
关于Xcode上的Other linker flags
Bugtags 让你的 APP 测试轻松、上线安心
集成支付宝钱包支付iOS SDK的方法与经验
App上架重磅通知:App Store安全新规17年1月生效
IOS 进阶之 WKWebView
教你动手做一个 iOS 越狱 app
MJExtension使用
Swift和Objective-C混编的注意啦
Copyright © 2011-2022 走看看