产品
解决方案
文档与社区
权益中心
定价
云市场
合作伙伴
支持与服务
了解阿里云
备案
控制台
开发者社区
首页
探索云世界
探索云世界
云上快速入门,热门云上应用快速查找
了解更多
问产品
动手实践
官方博客
考认证
TIANCHI大赛
活动广场
活动广场
丰富的线上&线下活动,深入探索云世界
任务中心
做任务,得社区积分和周边
高校计划
让每位学生受益于普惠算力
训练营
资深技术专家手把手带教
话题
畅聊无限,分享你的技术见解
开发者评测
最真实的开发者用云体验
乘风者计划
让创作激发创新
阿里云MVP
遇见技术追梦人
直播
技术交流,直击现场
下载
下载
海量开发者使用工具、手册,免费下载
镜像站
极速、全面、稳定、安全的开源镜像
技术资料
开发手册、白皮书、案例集等实战精华
插件
为开发者定制的Chrome浏览器插件
探索云世界
新手上云
云上应用构建
云上数据管理
云上探索人工智能
云计算
弹性计算
无影
存储
网络
倚天
云原生
容器
serverless
中间件
微服务
可观测
消息队列
数据库
关系型数据库
NoSQL数据库
数据仓库
数据管理工具
PolarDB开源
向量数据库
热门
百炼大模型
Modelscope模型即服务
弹性计算
云原生
数据库
云效DevOps
龙蜥操作系统
平头哥
钉钉开放平台
物联网
大数据
大数据计算
实时数仓Hologres
实时计算Flink
E-MapReduce
DataWorks
Elasticsearch
机器学习平台PAI
智能搜索推荐
人工智能
机器学习平台PAI
视觉智能开放平台
智能语音交互
自然语言处理
多模态模型
pythonsdk
通用模型
开发与运维
云效DevOps
钉钉宜搭
支持服务
镜像站
码上公益
开发者社区
开发与运维
文章
正文
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2017-11-26
1266
版权
版权声明:
本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议
》和 《
阿里云开发者社区知识产权保护指引
》。如果您发现本社区中有涉嫌抄袭的内容,填写
侵权投诉表单
进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
简介:
继续总结项目里的一些小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
>
本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2005/12/03/290031.html,如需转载请自行联系原作者
文章标签:
JavaScript
内存技术
前端开发
老朱教授
目录
相关文章
闻缺陷则喜何志丹
|
9月前
|
C#
C# 加载并显示菜单
C# 加载并显示菜单
闻缺陷则喜何志丹
34
0
0
Boale_H
|
2月前
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
Boale_H
166
1
1
蒾酒
|
2月前
|
前端开发
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
蒾酒
114
1
1
游客4llb6htoixmxw
|
10月前
|
区块链
如何修改 pdf 文件默认的显示图标
如何修改 pdf 文件默认的显示图标
游客4llb6htoixmxw
207
0
0
云高风轻
video 预览图 -去掉下载和全屏按钮
谷歌浏览器版本是54.0-57.0之间,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。
云高风轻
283
0
0
y2hr4cjzssnlm
Qt把当前窗口的内容保存为一张图片
Qt把当前窗口的内容保存为一张图片
y2hr4cjzssnlm
420
0
0
asing1elife
video标签隐藏下载按钮
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82796580 ...
asing1elife
1754
0
0
李一花
|
JavaScript
前端开发
安全
扩展EasyUI在页面中马上显示选中的本地图片
在编写前台页面的时候,有时须要将选中的图片夹杂着其它信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,须要将该图片显示在页面上。
李一花
2461
0
0
杰克.陈
|
C#
WPF 鼠标在图片Image上悬停时切换更改设置图片源Source
// 无效的写法,图片不会被切换 ...
杰克.陈
2306
0
0
云栖希望。
|
内存技术
纯AS代码flash实现预览上传本地图片功能
云栖希望。
1233
0
0
热门文章
最新文章
1
前端常见兼容问题系列6: 一些安卓APP的WebView中<input type="file">不工作
2
SpringCloud Alibaba
3
无法初始化SFTP协议。主机是SFTP服务器吗
4
CentOS6、7编译安装FFmpeg
5
UI自动化测试分析与实践 | F2etest&UIRecorde
6
MySQL无损复制
7
shell引用脚本绝对路径
8
容器云落地的痛点
9
Go语言中的匿名函数和闭包的样子
10
《C++语言基础》程序阅读——构造函数和析构函数
1
实现权限控制的方法
27
2
正则表达式替换字符串的方法
23
3
了解SENT协议及其应用
26
4
配置applicationContext.xml文件
29
5
使用OutputStreamWriter写入数据
23
6
使用notifyAll唤醒所有等待线程
20
7
CRM报表在企业中的应用:分析工具与报告自动化
21
8
Spring Boot导购电商返利App架构设计
21
9
定义和使用Quartz调度表达式
19
10
Oracle游标的定义与使用
15
相关电子书
更多
低代码开发师(初级)实战教程
冬季实战营第三期:MySQL数据库进阶实战
阿里巴巴DevOps 最佳实践手册
下一篇
部署LAMP环境(Alibaba Cloud Linux 3)