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
>
查看全文
相关阅读:
ping 网关不同的原因(51cto博客搬迁)
Linux Shell常用命令总结(51cto 博客搬迁)
学生管理系统管理系统
offset属性在各版本浏览器中的不同算法
常用正则表达式
select城市3级联动
html5表单验证消息框
清除浏览器默认选择效果
排序之简单的冒泡排序
简单的桶排序
原文地址:https://www.cnblogs.com/conquer/p/1117367.html
最新文章
使用JSON进行数据传输的总结
Spring Web MVC是什么
JAVA面试总结
maven
JAVA一些基础概念
jQuery Validate验证框架详解
JAVA环境变量配置
SpringMVC拦截器-性能监控
asp.net ImageButton鼠标事件更换图片
ASP.NET 操作json
热门文章
『脉脉体验』
DatagramPacket与DatagramSocket
多线程实现端口扫描
局域网活跃主机扫描
java 实现数组去重(集合转换)
netbeans 下 第三方库的导入问题
初学 Java Web 开发,请远离各种框架,从 Servlet 开发
博客搬迁
ubuntu13.04下ftp的简单搭建过程
Cisco Packet Tracer 使用方法(51cto博客搬迁)
Copyright © 2011-2022 走看看