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
>
查看全文
相关阅读:
OC MRC之循环引用问题(代码分析)
OC MRC之 @property参数(代码分析)
OC MRC之set方法内存管理(代码分析)
OC MRC之多对象之间管理(代码分析)
OC MRC之计数器的基本操作(代码分析)
最流行的android组件大全
Android主题切换方案总结
Picasso – Android系统的图片下载和缓存类库
Android无法导入下载好的项目(和Eclipse中已经存在的项目命名一样导致冲突)解决办法
Android Studio 简单设置
原文地址:https://www.cnblogs.com/conquer/p/1117367.html
最新文章
PHP session回收机制(转)
多域名THINKPHP利用MEMCACHE方式共享SESSION数据(转)
Apc缓存Opcode(转)
CentOS 6.5 下安装 Redis 2.8.7
Centos6.0使用第三方YUM源(EPEL,RPMForge,RPMFusion)
C语言_来了解一下GCC编译器编译C可执行脚本的过程
优化Linux内核参数提高服务器负载能力
MysqL主从复制_模式之GTID复制
Win10下安装Go开发环境
MysqL读写分离的实现-Mysql proxy中间件的使用
热门文章
MysqL错误之_ERROR! MySQL server PID file could not be found!
MySQL主从复制_复制过滤
MysqL 磁盘写入策略之innodb_flush_log_at_trx_commit
MysqL 主从事务数据安全之sync_binlog
MySQL的BlackHole引擎在主从架构中的作用
OC 文件基本操作
OC ARC之循环引用问题(代码分析)
OC ARC之基本使用(代码分析)
OC 内存管理之自动内存管理ARC
OC MRC之autorelease问题(代码分析)
Copyright © 2011-2022 走看看