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
>
查看全文
相关阅读:
code第一部分数组:第十七题 爬楼梯问题
code第一部分数组:第十六题 数组表示数,加一操作
code第一部分数组:第十五题 矩阵翻转(图像翻转)
code第一部分:数组 第十四题 雨水问题
code第一部分数组:第十题:移除数组中目标元素
[java 2020-04-24] Maven多模块项目+SpringBoot,编译失败:程序包xxx不存在
[java 2020-04-24] springboot生成的jar包没有主类和依赖jar包
[java 2019-12-16] SimpleDateFormat格式化跨年显示格式错误
[2019-11-22]马说
[linux 2019-10-23] linux可以创建多少个用户
原文地址:https://www.cnblogs.com/conquer/p/1117367.html
最新文章
购买阿里云遇到Permission denied的问题
springboot项目部署到ubuntu18.04的过程,http跳转https,使用acme.sh安装证书
如何修改git已提交记录的邮箱?
开源项目filepond的独立自由之路:城市套路深
自定义Appium
在 WPF 中进行表单验证
JS 实时刷新页面
关于 ListBox 自动换行
Kindle 特价书
观察者模式
热门文章
组合模式
C#中的全局异常
单例和单态
C#单文件应用
C#基础之CLR的执行模型(三)
code第一部分数组:第二十三题 奇数次中查找单独出现一次的数
code第一部分数组:第二十二题 偶数次中查找单独出现一次的数
code第一部分数组:第二十一题:分糖果
code第一部分数组:第二十题:加油站
code第一部分数组:第十九题 矩阵元素为0,横列置零
Copyright © 2011-2022 走看看