上传图片时,如何用js判断图片的尺寸大小是否合法?

Laughing 2011-04-22 04:19:32
上传图片时,如何用js判断图片的尺寸大小是否合法?如要求为不得大于80*100,这源于可恶的需求。
我在网上找了相关的代码,可是都不能使用,在这里请教大家!

请勿复制粘贴网上的代码!!!
...全文
604 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
hepeng_8 2011-04-22
  • 打赏
  • 举报
回复
public static void main(String[] args) throws Exception {
// TODO Auto-generated method stub
BufferedImage image = ImageIO.read(new File("C:/cp.png"));
System.out.println(image.getWidth());
System.out.println(image.getHeight());
}

这样能得到图片的长和宽
huanggangmaojin 2011-04-22
  • 打赏
  • 举报
回复
js我没试过,但是直接在java代码里面设置是很简单的
  • 打赏
  • 举报
回复
[Quote=引用 13 楼 t150ckh 的回复:]

+1引用 12 楼 yaoweijq 的回复:

en
服务端还是实在
引用 11 楼 rainsilence 的回复:
老实点,走服务器端把
[/Quote]

服务端吧,分两步:一步提交,一步保存,通过验证的的才能保存。
t150ckh 2011-04-22
  • 打赏
  • 举报
回复
+1[Quote=引用 12 楼 yaoweijq 的回复:]

en
服务端还是实在
引用 11 楼 rainsilence 的回复:
老实点,走服务器端把
[/Quote]
yaoweijq 2011-04-22
  • 打赏
  • 举报
回复
en
服务端还是实在
[Quote=引用 11 楼 rainsilence 的回复:]
老实点,走服务器端把
[/Quote]
rainsilence 2011-04-22
  • 打赏
  • 举报
回复
老实点,走服务器端把
Laughing 2011-04-22
  • 打赏
  • 举报
回复
yaoweijq,我周一试下,正式下班了,thanks
Laughing 2011-04-22
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 rainsilence 的回复:]

用Js判断方法有3种:有了html5后又多了一种,下面列举其中一种
var image = new Image();

image.onload = function() {
alert(image.getWidth());
alert(image.getHeight());
}

image.src = "url";

但是由于ie8下file控件取不到正确……
[/Quote]
我试过这种方法,ie8下跟没有这些代码一个样,起不到作用
yaoweijq 2011-04-22
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>添加首页浮动图片</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#newPreview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/javascript" language="javascript">
function PreviewImg(imgFile)
{
//原来的预览代码,不支持 IE7。
//var oldPreview = document.getElementById("oldPreview");
//oldPreview.innerHTML = "<img src=\"file:\\\\" + imgFile.value + "\" width=\"80\" height=\"60\" />";
//新的预览代码,支持 IE6、IE7。
var newPreview = document.getElementById("newPreview");
var uploadValue = imgFile.value;
var len = uploadValue.length;
var fileType = uploadValue.substr(uploadValue.lastIndexOf(".")+1,len).toLowerCase();
if((fileType !='bmp') && (fileType != 'jpg') && (fileType != 'jpeg') && (fileType != 'gif') && (fileType != 'png')){
alert('文件类型不正确,请重新选择');
return;
}
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
newPreview.style.width = "50px";
newPreview.style.height = "60px";
setTimeout("kk()",2000);
}
var final_width = 0;
var final_height = 0;
function kk(){
var newPreview = document.getElementById("newPreview");
final_width = newPreview.offsetWidth;
final_height = newPreview.offsetHeight;
}
</script>

<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function sub(){
var f = document.getElementById("form1");
var uploadValue = document.getElementById('fileToUpload').value;
if(uploadValue==''){
alert('请选择文件');
return;
}
var img = new Image();//构造JS的Image对象
//alert(img.src);
//img.src = f.fileToUpload.value;//将本地图片赋给image对象
img.src = document.form1.fileToUpload.value;
var len = uploadValue.length;
var fileType = uploadValue.substr(uploadValue.lastIndexOf(".")+1,len).toLowerCase();
if((fileType !='bmp') && (fileType != 'jpg') && (fileType != 'jpeg') && (fileType != 'gif') && (fileType != 'png')){
alert('文件类型不正确,请重新选择');
return;
}
if(final_width != 80 || final_height != 80){
alert("文件的大小不正确,必须为80*80像素");
return;
}
var link = document.getElementById('link').value;
if(!(link.indexOf('http://') == 0 || link.indexOf('https://') ==0 ) ) {
alert('链接不正确,必须以http://或https://开头');
return;
}
f.action = "npage/cms/main/doAddFloatingPic.jsp";
f.submit();
}
</script>
</head>

<body>
<!-- 添加浮动图片的form 这个页面宽度打开为450-->
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="doAddFloatingPic.jsp">
<div class="importTable">
<font color="red">
提醒:有效文件类型:gif,png,jpg,bmp.     上传图片大小为:80像素 X 80像素</font>
<br/><br/>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td width="70px">选择图片:</td>
<td width="380px"><input id="fileToUpload" type="file" size="30" name="fileToUpload" class="input" contenteditable="false" onchange="javascript:PreviewImg(this);"></td>
</tr>
<tr>
<td>图片预览:</td>
<td><div id="newPreview"></div></td>
</tr>
<tr>
<td>设置链接:</td>
<td><input type="text" id="link" name="link" size="29"/></td>
</tr>
<tr>
<td>是否隐藏:</td>
<td>
<input type="radio" name="is_hidden" value="Y"/>是
<input type="radio" name="is_hidden" value="N" checked/>否
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" class="btn_system" value="增加" onclick="javascript:sub();"/>
</td>
</tr>
</tbody>
</table>
</div>
</form>

</body>
</html>

最近刚弄的
ie6 7可以用
ff ie8不清楚
rainsilence 2011-04-22
  • 打赏
  • 举报
回复
用Js判断方法有3种:有了html5后又多了一种,下面列举其中一种
var image = new Image();

image.onload = function() {
alert(image.getWidth());
alert(image.getHeight());
}

image.src = "url";

但是由于ie8下file控件取不到正确的path,所以用什么方法只要是通过file控件来的path,都不行。干脆直接上传通过java来判断。
Laughing 2011-04-22
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 rainsilence 的回复:]

Java code
import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;

public class Test {


/**
* @param args
*/
public static void main(String[] ……
[/Quote]
服务器端代码行?
上传图片时,图片在客户机上。
rainsilence 2011-04-22
  • 打赏
  • 举报
回复
我觉得,就算人家不符合要求,你把人家的图片转成你需要的大小不是更加好?
rainsilence 2011-04-22
  • 打赏
  • 举报
回复
import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;

public class Test {


/**
* @param args
*/
public static void main(String[] args) throws Exception {
// TODO Auto-generated method stub
BufferedImage image = ImageIO.read(new File("C:/cp.png"));
System.out.println(image.getWidth());
System.out.println(image.getHeight());
}

}
Winson.Framework 1.0简介:

Winson.Framework 1.0可以说是一个基于ASP.NET2.0技术小型应用框架,是本人从以

往的开发经验和网上的一些好的代码收集整合而成的。

这里需要说明一下的就是,本框架的数据库底层代码是改自于台湾一位朋友的数据库

底层代码,我是在其基础上添加了一些功能,如可同可支持MSSQL和ACCESS数据库,可显

示自定义异常等。当然,如果需也,也可以继续扩展支持其他的数据库,呵呵。

========================================

功能介绍:

一、数据库类:

1、本框架是基于ASP.NET2.0技术,同可支持MSSQL和ACCESS数据库,只需在配置文件里修改
一下即可马上使用不同的数据库,不需改其他任何代码。
2、可设置是否对连接字符串进行加密,并可设置加解密KEY。
3、可直接使用XML文件为实体
4、可设置是否需要缓存,同可设置缓存文件依赖存放的位置
5、可支持多语言的数据库自定义错误信息,现在支持简体和繁体2种
6、可设置是否启用错误日志记录
7、可设置自动保存应用程序参数的间间隔
8、可设置是否显示系统异常信息,否则显示自定义异常信息
9、通用的数据库底层操作,同支持存储过程调用
10、方便地操作读取自定义配置文件的信息

二、功能控件类:

1、漂亮的自定义警告框,可为警告框设置相应的事件
2、漂亮的自定义提示框,即类似MSN消息框的效果,可设置多种效果,也可以使用事件钩子调用
3、强大的自定义分页控件,支持多种数据绑定控件,支持自定义分页按钮样式,支持AJAX无刷新
分页,可灵活设置各种参数效果
4、方便的Tab控件(取自Discuz!NT),即DNT论坛后台的那种选项卡的效果
5、类帮助器,可以动态对类,类成员进行控制(添加,删除),目前只支持属性控制。
6、可动态创建ul或者dl构成的列表
7、通用的MessageBox类,可根据需要显示各种提示框
8、支持URL重写,可自定义重写规则,同还可以限制IP访问,需修改XML配置文件
9、Xml文件操作类库,基本上已可满足常用的XML操作需要

三、经常需要使用的一些验证逻辑与方法类:

1、返回上一个页面的地址
2、获取当前请求的原始 URL(URL 中域信息之后的部分,包括查询字符串(如果存在))
3、获得当前完整Url地址
4、过滤危险字符串
5、替换html中的特殊字符
6、恢复html中的特殊字符
7、检查一个字符串是否可以转化为日期,一般用于验证用户输入日期的合法
8、检查一个字符串是否是纯数字构成的,一般用于查询字符串参数的有效性验证。
9、检查一个字符串是否是纯字母和数字构成的,一般用于查询字符串参数的有效性验证。
10、判断是否是数字,包括小数和整数。
11、快速验证一个字符串是否符合指定的正则表达式。
12、上传文件,不限制大小和类型并上传到默认UploadFile目录
13、上传文件,不限制大小和类型并上传到自定义路径
14、上传文件,可设置大小、类型和存放路径
15、生成缩略图
16、在图片上增加文字水印
17、在图片上生成图片水印

四、实体操作类:

1、利用泛型和集合,结合数据库实体进行操作以提高效率和封装性
2、动态生成所需的SQL增、删、改、查等语句对实体进行操作
3、上层操作可以不需要写SQL语句
4、实体赋值方便,只需设置需要更新的某个字段即可,不需全部字段去赋值,同读取实体
系统也会自动为每个字段赋值,不需再手工编写赋值代码
5、由于本框架的实体类和实体操作类需特别处理,因此已提供了实体类和实体操作类的代码
生成模板文件,使用Codesmith生成!
6、另此DEMO附一个无限级分类的管理操作及相关的数据库

五、其他说明:

本程序目录里已有多个试例DEMO,基本上主要功能均有演示了,另有一个非常通用方便的JS

校验文件,在js/check.js目录,至于使用方法,请自己看看里面的注释吧,呵呵

欢迎大家一起来完善这个框架,有什么好的东西记得告诉我哦:)

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧