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
>
查看全文
相关阅读:
ES6扩展
javascript当中prototype用法
三列浮动中间宽度自适应
介绍axios和promise
JS高级---实例对象和构造函数之间的关系
JS-数组常用方法整理
原生JS轮播图
JavaScript 开胃菜
JS高级---遍历DOM树
JS高级---正则表达式练习身份证号码
原文地址:https://www.cnblogs.com/conquer/p/1117367.html
最新文章
ASP.NET 上传文件到共享文件夹
公司APP内嵌腾讯X5内核webview,如何使用appium进行测试?
嵌入式软件工程师面试题目01
JZ2440学习笔记 02 开发板程序烧写
JZ2440学习笔记 03 裸机点亮LED灯
人生苦短,测试媛为什么要学Python
【夜神模拟器】【BugList14】启动夜神模拟器时,提示“nox_adb.exe已停止工作”
MySQL去掉小数后面多余的0
梦:公司,郊外,平板,打车,房子,好友
Unreal UMG 可见性畅谈
热门文章
itest(爱测试) 开源一站式敏捷测试管理平台&极简项目管理,重大升级(接口测试)6.0.0 发布
PyCharm/Airtest/conda Runtime Error R6034解决方法
iterm + tmux 不间断工作流
c++二叉树
基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
SpringBoot踩坑记(HTTP 400 错误)
vue基础用法
【外文阅读】Web Development in 2020: What Coding Tools You Should Learn---Quincy Larson
react 报红错误汇总
Copyright © 2011-2022 走看看