zoukankan
html css js c++ java
JS实时预览上传图片缩略图
实现代码一:
<
script
language
=JavaScript
>
var
flag
=
false
;
function
DrawImage(ImgD)
{
var
image
=
new
Image();
image.src
=
ImgD.src;
if
(image.width
>
0
&&
image.height
>
0
)
{
flag
=
true
;
if
(image.width
/
image.height>= 120
/
80
)
{
if
(image.width
>
120
)
{
ImgD.width
=
120
;
ImgD.height
=
(image.height
*
120
)
/
image.width;
}
else
{
ImgD.width
=
image.width;
ImgD.height
=
image.height;
}
ImgD.alt
=
image.width
+
"
×
"
+
image.height;
}
else
{
if
(image.height
>
80
)
{
ImgD.height
=
80
;
ImgD.width
=
(image.width
*
80
)
/
image.height;
}
else
{
ImgD.width
=
image.width;
ImgD.height
=
image.height;
}
ImgD.alt
=
image.width
+
"
×
"
+
image.height;
}
}
/**/
/**/
/**/
/*
else{
ImgD.src="";
ImgD.alt=""
}
*/
}
function
FileChange(Value)
{
flag
=
false
;
document.all.uploadimage.width
=
10
;
document.all.uploadimage.height
=
10
;
document.all.uploadimage.alt
=
""
;
document.all.uploadimage.src
=
Value;
}
function
BeforeUpLoad()
{
if
(flag) alert(
"
OK
"
);
else
alert(
"
FAIL
"
);
}
</
script
>
<
INPUT
style
="WIDTH: 143px; HEIGHT: 18px"
type
=file
size
=8
name
=pic
onchange
="javascript:FileChange(this.value);"
>
<
IMG
id
=uploadimage
height
=10
width
=10
src
=""
onload
="javascript:DrawImage(this);"
><
BR
>
<
Button
onclick
="javascript:BeforeUpLoad();"
>
提交
</
Button
>
实现代码二:
<
input
id
="file"
type
="file"
onfocus
="javascript:ShowImage(this.value,document.getElementById('img'))"
>
<
br
/>
<
img
id
="img"
STYLE
="visibility:hidden"
height
="100px"
width
="100px"
>
<
script
language
="javascript"
type
="text/javascript"
>
function
ShowImage(value,img)
{
//
alert(value);
//
检测盘符
//
alert(value.indexOf(':'));
//
检测文件是否有扩展名
//
alert(value.length-value.lastIndexOf('.'));
//
取文件扩展名
//
alert(value.substr(value.length-3,3));
//
检测文件扩展名是否合法
//
alert(CheckExt(value.substr(value.length-3,3)));
if
(value.length
>
5
&&
value.indexOf(
'
:
'
)
==
1
&&
(value.length
-
value.lastIndexOf(
'
.
'
))
==
4
&&
CheckExt(value.substr(value.length
-
3
,
3
)))
{
img.src
=
value;
img.alt
=
"
本地图片预览
"
;
img.style.visibility
=
"
visible
"
;
}
else
{
img.style.visibility
=
"
hidden
"
;
}
}
//
检查扩展名是否合法,合法返回True
function
CheckExt(ext)
{
//
这里设置允许的扩展名
var
AllowExt
=
"
jpg|gif|jpeg|png|bmp
"
;
var
ExtOK
=
false
;
var
ArrayExt;
if
(AllowExt.indexOf(
'
|
'
)
!=-
1
)
{
ArrayExt
=
AllowExt.split(
'
|
'
);
for
(i
=
0
;i
<
ArrayExt.length;i
++
)
{
if
(ext.toLowerCase()
==
ArrayExt[i])
{
ExtOK
=
true
;
break
;
}
}
}
else
{
ArrayExt
=
AllowExt;
if
(ext.toLowerCase()
==
ArrayExt)
{
ExtOK
=
true
;
}
}
return
ExtOK;
}
</
script
>
查看全文
相关阅读:
CentOS修改hosts文件及生效命令
Elasticsearch处理 空对象问题
Windows查看某个端口被占用的解决方法
PHP Fatal error: Uncaught Error: Class ‘\Elasticsearch\Serializers\SmartSerializer‘ not found in /h
浏览器正常导出文件phpecxel
ElasticsearchPHP 快速开始
MySQL为什么选择B+树存储索引
PHP7.3.0+弃用FILTER_FLAG_SCHEME_REQUIRED的解决办法
Zoom支持自动生成字幕;SharePlay上线;Safari 更新导致大量bug |WebRTC风向
日均请求量1.6万亿次背后,DNSPod的秘密国密DoH篇
原文地址:https://www.cnblogs.com/conquer/p/1117367.html
最新文章
基于dremio+oceanbase+cube.js 数据服务开发
oceanbase 最好使用obproxy 进行访问
关于graalvm 的一些官方QA
使用remix 进行web开发
mavendefaulthttpblocker 问题
OpenMetadata 0.6 版本发布了
oceanbase docker运行试用(一)
oceanbase 普通租户root 默认密码安全问题
npm 镜像加速
oceanbase 扩容缩容处理
热门文章
使用graalvm 进行node 与java 代码的调用
PostgreSQL下载
SSH客户端神器之 MobaXterm
Linux如何查看JDK的安装路径
LDAP概念和原理介绍
Linux下配置系统ipv6环境
Linux如何查看JDK的安装路径
SSH远程神器—Termius
满满干货:面试前应做的14点准备
你知道数据库索引的工作原理吗?
Copyright © 2011-2022 走看看