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

Java > Web 开发
收藏 回复
[问题点数：100分，结帖人aqszhuaihuai]
更多帖子
私信 空间 博客
Laughing
等级
本版专家分：138
结帖率 100%
上传图片时，如何用js判断图片的尺寸大小是否合法？如要求为不得大于80*100，这源于可恶的需求。
我在网上找了相关的代码，可是都不能使用，在这里请教大家！

请勿复制粘贴网上的代码！！！
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
rainsilence
等级
本版专家分：6595
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());

	}



}
只看TA 引用 举报 #3得分 47
更多帖子
私信 空间 博客
rainsilence
等级
本版专家分：6595
我觉得，就算人家不符合要求，你把人家的图片转成你需要的大小不是更加好？
只看TA 引用 举报 #4得分 10
更多帖子
私信 空间 博客
Laughing
等级
本版专家分：138
引用 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[] ……

服务器端代码行？
上传图片时，图片在客户机上。
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
rainsilence
等级
本版专家分：6595
用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来判断。
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
yaoweijq
等级
本版专家分：10110
<!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.&nbsp;&nbsp;&nbsp;&nbsp; 上传图片大小为：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不清楚
只看TA 引用 举报 #7得分 10
更多帖子
私信 空间 博客
Laughing
等级
本版专家分：138
引用 6 楼 rainsilence 的回复:
用Js判断方法有3种：有了html5后又多了一种，下面列举其中一种
var image = new Image();

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

image.src = "url";

但是由于ie8下file控件取不到正确……

我试过这种方法，ie8下跟没有这些代码一个样，起不到作用
只看TA 引用 举报 #8得分 0
更多帖子
私信 空间 博客
Laughing
等级
本版专家分：138
yaoweijq，我周一试下，正式下班了，thanks
只看TA 引用 举报 #10得分 0
1 2
收起
收藏 回复
Laughing

等级：

关注 私信 TA的帖子
js图片上传，判断图片大小

统一收银台项目， 兼容所有浏览器，唯一的缺点就是IE低版本，input的左半部分点击一次...JS代码如下：//图片上传 $('.uploadImg').change(function() { var $this = $(this); var file = $(this)[0]; $(this).pare

js判断图片上传时的文件大小，和宽高尺寸

很好奇它是如何在图片上传前，检测到图片的大小和尺寸的？我们来写个小实例实现一下吧 如何读取图片的size 首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：last...

js判断图片上传时的文件大小、类型，和宽高尺寸

如何读取图片的size、type 首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图： 这样的话，我们就可以检测到...

js验证上传图片格式和大小是否符合要求

js部分： function getPhotoSize(obj){ photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名 if(photoExt!=".png"&&photoExt!=".jpg"){ alert("请上传后缀名为jpg或png的...

js实现上传图片类型+大小+尺寸验证

图片类型+大小+尺寸验证 html代码： &lt;input type="file" name="files" id="file" onchange="verificationPicFile(this)"&gt; js代码： //图片类型验证 ...

原生js判断上传的图片尺寸、大小、类型的要求符不符合

有时候我们需要用到图片上传功能，并且只需要jpg,png这些格式，大小我们也想限制一下，虽然这些在后端也可以处理，但如果在前端处理一下，这就给服务器减少一点压力，或者作为双保险，前后端都检验一边。 默认和不...

用JS如何判断文件上传的大小

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

js 异步上传图片 限制图片的格式大小

上传图片的大小限制一直很困难，找了很多都没找到。 其实还是后端限制比较好。但是这样一来就需要进行ajax请求。 使用jquery 的 ajaxFileUpload控件前端界面 <input type="hidden" value="45570" id="liveId">

js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高

js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高 作为刚入职几个月的小萌新，接到的其中一个需求，就是做OA首页广告位的图片功能，虽然增删改查很简单，不过就难在上传图片和显示...

JS限制上传图片大小不使用控件在本地实现

件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。使用JS可以轻松解决词问题,本文详细介绍，需要了解的朋友可以参考下

【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）

1、WangEditor本身提供的 “编辑图片” 功能，调整图片大小选项只能为30%，50%，100%。 2、修改 wangEditor.js 源码后，用户可以输入自定义大小。例如，50%效果如下： 再例如，20%效果如下： 修改方式 在 ...

iframe+ajaxSubmit结合--续篇(判断图片(文件)大小，上传图片，验证码刷新）

人们似乎慢慢遗忘了iframe。毕竟在ajax未诞生前。都是用iframe来实现无刷新的效果。当请教iframe实现无刷新知识...用户选择图片及时判断图片大小，不符合的话清空value 点提交按钮判断验证码是否正确。页面不能刷新...

如何用javascript控制上传文件的大小

以下是引用片段： function CheckFileSize() { var s = document.Myform.photo.value; if(s==" ")return false; va

JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。使用JS可以轻松解决词问题，js在上传图片前判断大小 这个可以用javascript实现,效果

IE+JS: 上传之前检测图片文件大小及类型

IE+JS: 上传之前检测图片文件大小October 2, 2005 at 1:34 am · Filed under Scripts 文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。...

js和react判断上传文件类型

1.js判断上传文件类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))) { alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject)...

如何用javascript控制上传文件的大小？

function CheckFileSize() { var s = document.Myform.photo.value; if(s==" ")return false; var img = new Image(); img.src =

如何用javascript控制上传文件的大小？

如何用javascript控制上传文件的大小？ --------本文讲的是用javascript和在IE下Image的一些属性如(fileSize,fileUpdatedDate)等控制上传文件的大小。 function CheckFileSize() { var s = document.

【javascript】File API 读取并显示本地图片 -1

在过去,浏览器是不允许我们读取本地的文件,包括图片。因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问url地址,达到预览图片的功能。而如今,随着标准不断的改善,javascript里的API...

如何用javascript控制上传文件的大小

以下是引用片段：<form name=Myform onsubmit="return CheckFileSize()"> <input type=file name=photo><br/> <input type=submit value=submit></form> &l...

IE+JS: 上传之前检测图片文件大小

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

IE+JS: 上传之前检测图片文件大小及类型

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

JS上传图片

图片 click="addFile()" />   protected void btnOK_Click(object sender, EventArgs e) { HttpFileCollection myFile = HttpContext.Current.Request.Files; int iFileCount = myFile

如何用javascript控制上传文件的大小

以下是引用片段： function CheckFileSize() { var s = document.Myform.photo.value; if(s==" ")return false; var i

js无法实现上传文件控制文件大小以及文件类型功能

最近在做一套网站，网站允许注册的用户上传自己的一些产品... 最初的思路是使用js脚本实现这个功能，在搜索控制上传文件大小js功能代码后才郁闷的发现，代码是惊人的一致，全部为： js 代码 function CheckFileSi...

IE+JS: 上传之前检测图片文件大小

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

IE+JS: 上传之前检测图片文件大小

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

JS中使用FormData上传文件、图片的方法

参考博客：http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.html 使用CORS 实现Ajax的另类跨域:关于浏览器端，以jQuery为例，...

IE+JS: 上传之前检测图片文件大小October

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

IE+JS: 上传之前检测图片文件大小October

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。不过在IE下img有几个附加的属性，如：fileCreatedDate、fileModifiedDate、fileSize、...

相关热词 c#中字符串大小写转化 c# 设置加载ie11 c#捕获关机信号 c#显示键盘输入的字符 c#list对象排序 c# sql查询方法 3d贝塞尔曲线 c# c#获取秒 c# 类型可空转换 c#字符串转ascii码