`
haoningabc
  • 浏览: 1476678 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

验证图片大小

阅读更多
测试
news.sohu.com
news.sina.com.cn
news.163.com
sina和163的没有jquery
所以先加这行代码
javascript:document.body.innerHTML +="<scri"+"pt type='text/javasc"+"ript' src='http://js.sohu.com/library/jquery1.3.2.js'></scr"+"ipt>";

保存到收藏夹
在把下面代码保存成一行,也保存到收藏夹
javascript:
document.body.innerHTML +="<scri"+"pt type='text/javasc"+"ript'>var oldimgcount=$('img').size();;function getNewsSohuComImg_hao(thisurl,thisid){$('#picdiv').html(thisurl+';'+$('#picdiv').html());}function createImgPic_haonn(){var imgarray=$('#picdiv').text();imgarray=imgarray.split(';');var tmpstr='';for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';$('#picdiv').html(tmpstr);}}function countImgSize_haonn(){$('img').each(function(index){if(index>=oldimgcount){$('#jieguo').html($(this).attr('src')+' width:'+$(this).width()+' height:'+$(this).height()+'</br>'+$('#jieguo').html());}});}function countImgUrl_haonn(){for(var thisi=0;thisi<$('img').size();thisi++){var ull=$('img').eq(thisi).attr('src');getNewsSohuComImg_hao(ull,'haohao'+thisi);}}</scri"+"pt>";
document.body.innerHTML +="<hr /><input type='button' onclick='countImgUrl_haonn()' value='提取url'/>";
document.body.innerHTML += "<input type='button' onclick='createImgPic_haonn()' value='生成图片'/>";
document.body.innerHTML +="<input type='button' onclick='countImgSize_haonn()' value='判断大小'/>";
document.body.innerHTML +="<div id='jieguo'></div>";
document.body.innerHTML +="<div id='picdiv'></div>";


new.163.com
依次点完两个收藏夹之后
页面的最下面出现3个按钮
最后生成图片预览和图片大小
----------------------------
其他
test1.html
<html>
	<head>
		<title>mytest</title>
	</head>
<body>
<script type="text/javascript" src="http://js.sohu.com/library/jquery1.3.2.js" ></script>
<img src="http://ww1.sinaimg.cn/large/67b98b3djw1dptmqg51lbj.jpg" width="100" height="100" style="width:100;height:100"/>
<img src="http://ww2.sinaimg.cn/large/6966d53egw1dptmcb4663j.jpg" width="100" height="100" style="width:100;height:100"/>

</body>
</html>
<script type="text/javascript">
	$("body").append("<hr /><input type='button' onclick='countImgUrl_haonn()' value='提取url'/>");
	$("body").append("<input type='button' onclick='createImgPic_haonn()' value='生成图片'/>");
	$("body").append("<input type='button' onclick='countImgSize_haonn()' value='判断大小'/>");
	$("body").append("<div id='jieguo'></div>");
	$("body").append("<div id='picdiv'></div>");
	//$("body").append("<scri"+"pt type='text/javascript'>alert('haha');</scri"+"pt>");
	//-----------下面代码不要有注释----生成一行给test2.html
	var oldimgcount=$('img').size();
	function getNewsSohuComImg_hao(thisurl,thisid){
		$('#picdiv').html(thisurl+';'+$('#picdiv').html());
	}
	function createImgPic_haonn(){
		var imgarray=$('#picdiv').text();
		imgarray=imgarray.split(';');
		var tmpstr='';
		for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){
			tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';
			$('#picdiv').html(tmpstr);
		}
	}
	function countImgSize_haonn(){
		$('img').each(function(index){
			if(index>=oldimgcount){
				$('#jieguo').html($(this).attr('src')+'---width:'+$(this).width()+',height:'+$(this).height()+'</br>'+$('#jieguo').html());
			}
		});
	}
	function countImgUrl_haonn(){
		for(var thisi=0;thisi<$('img').size();thisi++){
			var ull=$('img').eq(thisi).attr('src');
			getNewsSohuComImg_hao(ull,'haohao'+thisi);
		}
	}
</script>

test2.html
<html>
	<head>
		<title>mytest</title>
		<script type="text/javascript" src="http://js.sohu.com/library/jquery1.3.2.js" ></script>
	</head>
<body>

<img src="http://ww1.sinaimg.cn/large/67b98b3djw1dptmqg51lbj.jpg" width="100" height="100" style="width:100;height:100"/>
<img src="http://ww2.sinaimg.cn/large/6966d53egw1dptmcb4663j.jpg" width="100" height="100" style="width:100;height:100"/>
</body>
</html>
<script type="text/javascript">
//	document.body.innerHTML +="<scri"+"pt type='text/javasc"+"ript' src='http://js.sohu.com/library/jquery1.3.2.js'></scr"+"ipt>";
	
	$("body").append("<scri"+"pt type='text/javasc"+"ript'>var oldimgcount=$('img').size();function getNewsSohuComImg_hao(thisurl,thisid){$('#picdiv').html(thisurl+';'+$('#picdiv').html());}function createImgPic_haonn(){var imgarray=$('#picdiv').text();imgarray=imgarray.split(';');var tmpstr='';for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';$('#picdiv').html(tmpstr);}}function countImgSize_haonn(){$('img').each(function(index){if(index>=oldimgcount){$('#jieguo').html($(this).attr('src')+'---width:'+$(this).width()+',height:'+$(this).height()+'</br>'+$('#jieguo').html());}});}function countImgUrl_haonn(){for(var thisi=0;thisi<$('img').size();thisi++){var ull=$('img').eq(thisi).attr('src');getNewsSohuComImg_hao(ull,'haohao'+thisi);}}</scri"+"pt>");
	$("body").append("<hr /><input type='button' onclick='countImgUrl_haonn()' value='提取url'/>");
	$("body").append("<input type='button' onclick='createImgPic_haonn()' value='生成图片'/>");
	$("body").append("<input type='button' onclick='countImgSize_haonn()' value='判断大小'/>");
	$("body").append("<div id='jieguo'></div>");
	$("body").append("<div id='picdiv'></div>");
</script>

------------------
会出现页面变形的问题
如果是sohu的可以使用
javascript:$("body").append("<scri"+"pt type='text/javasc"+"ript'>var oldimgcount=$('img').size();;function getNewsSohuComImg_hao(thisurl,thisid){$('#picdiv').html(thisurl+';'+$('#picdiv').html());}function createImgPic_haonn(){var imgarray=$('#picdiv').text();imgarray=imgarray.split(';');var tmpstr='';for(var imgarrayindex=0;imgarrayindex<imgarray.length-1;imgarrayindex++){tmpstr+='<img id=haha'+imgarrayindex+' src='+imgarray[imgarrayindex]+' />';$('#picdiv').html(tmpstr);}}function countImgSize_haonn(){$('img').each(function(index){if(index>=oldimgcount){$('#jieguo').html($(this).attr('src')+' width:'+$(this).width()+' height:'+$(this).height()+'</br>'+$('#jieguo').html());}});}function countImgUrl_haonn(){for(var thisi=0;thisi<$('img').size();thisi++){var ull=$('img').eq(thisi).attr('src');getNewsSohuComImg_hao(ull,'haohao'+thisi);}}</scri"+"pt>");$("body").append("<hr /><input type='button' onclick='countImgUrl_haonn()' value='text0'/>");$("body").append("<input type='button' onclick='createImgPic_haonn()' value='text1'/>");$("body").append("<input type='button' onclick='countImgSize_haonn()' value='text2'/>");$("body").append("<div id='jieguo'></div>");$("body").append("<div id='picdiv'></div>");
分享到:
评论

相关推荐

    js验证上传图片 大小 格式

    接着,代码还包含了对图片大小的验证。这主要通过获取图片的尺寸(高度和宽度)和文件大小来进行。首先,创建一个新的`Image`对象,并设置其源为上传的图片路径。然后,通过`Image`对象的属性`height`、`width`和`...

    JS上传图片大小验证.rar

    在JavaScript中,对用户上传的图片进行大小验证是常见的需求,尤其在网页应用中,确保图片大小在合理范围内可以优化加载速度,节省服务器资源。这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例...

    C#自定义用户控件及用户控件验证

    // 验证图片大小不超过MaxSize if (ImageSource.Size.Width &gt; MaxSize || ImageSource.Size.Height &gt; MaxSize) { MessageBox.Show("图片大小超过限制,请重新选择!"); ImageSource = null; } else { ...

    点击图片触发input是file的事件

    在代码中,我们还可以看到一个用于验证图片大小和格式的逻辑。如果图片大小超过 5M 或格式不正确,将会弹出一个警告框,提示用户上传正确的图片。 知识点5:JQuery 的使用 在代码中,我们可以看到 JQuery 的使用。...

    Javascript验证上传图片大小[前台处理]

    在前台验证图片大小时,我们通常会限制用户上传图片的最大尺寸,比如100KB。实现时,首先会在文件输入框上绑定一个change事件,当用户选择文件后,该事件被触发。 在事件处理函数中,首先获取用户选中的图片文件...

    基于idea spring boot图片的上传和下载

    // 验证图片大小 if (file.getSize() &gt; 1024 * 1024 * 5) { // 限制为5MB return new ResponseEntity("图片过大,请上传不超过5MB的图片", HttpStatus.BAD_REQUEST); } // 验证图片格式 String fileName = ...

    JS验证图片格式 有预览功能

    这个“JS验证图片格式 有预览功能”的主题主要关注如何利用JavaScript来检查用户上传的文件是否为合法的图片格式,并提供实时预览功能。以下将详细介绍这一技术实现的关键知识点。 1. **文件输入事件(File Input ...

    Javascript 验证上传图片大小[客户端]

    首先,我们可以采用两种策略来验证图片大小: 1) 后台处理:通过AJAX将图片上传到服务器,然后在服务器端计算图片大小并进行处理。这种方法虽然可以准确判断图片大小,但如果文件过大,用户需要等待较长时间,效率...

    doNet多图片上传,水印,支持图片和字体水印,自己修改

    同时,可能会有验证图片大小、类型等限制,以确保上传的图片符合服务器的要求。 6. **Web**:标签中的"Web"表明这是Web应用的一部分,可能涉及到HTML、CSS、JavaScript与.NET后端的交互。前端使用AJAX技术发送文件...

    php上传图片到数据库.zip

    6. **用户体验**:为了让用户有更好的交互体验,可以添加一些前端验证,如JavaScript验证图片大小和格式,减少服务器的压力。另外,使用AJAX异步上传图片可以提供无刷新的上传体验。 7. **优化**:在生产环境中,...

    图片上传-可以限制图片的大小和类型

    1. **图片大小限制**: - **原因**:图片过大可能导致上传时间过长,增加服务器存储负担,甚至可能导致内存溢出等问题。 - **限制方式**:通常通过设置上传文件的最大尺寸(如KB或MB)来控制。例如,可以设定为2MB...

    电子商务案例 叫你如何处理图片存取和处理

    例如,用户通过网站上传图片时,系统应能实时接收并验证图片大小、格式,以防止恶意大文件占用服务器资源。接下来,为了减少存储空间和加快页面加载速度,图片通常会被压缩。这可以使用各种库如ImageMagick或Python...

    asp.net 选择客户端图片同时预览

    在ASP.NET中,虽然主要工作是在客户端完成的,但后端也可以提供一些辅助功能,比如验证图片大小、格式等。你可以通过AJAX提交文件信息到服务器,然后返回验证结果。如果验证通过,服务器可以返回一个预览图片的临时...

    上传图片前验证图片格式及实现预览

    为了提供良好的用户体验和系统安全性,开发者需要在用户上传图片前进行格式验证,确保图片符合规定的格式,并提供预览功能,让用户在提交前能查看上传效果。本文将详细讲解如何使用JavaScript(JS)在客户端实现这一...

    基于jQuery的图片点击验证插件

    1. **Image-verify.css**:这是插件的样式文件,定义了验证图片的外观和布局,包括图片大小、边框、提示文字等样式。 2. **index.html**:这是示例页面,展示了如何在HTML中嵌入和使用验证插件。它可能包含一个包含...

    上传图片之前验证图片格式,同时实现预览

    在实际项目中,你可能需要考虑更多的细节,例如错误处理、多图上传的管理、图片大小限制等。在WebApplication1这个项目中,你可能已经看到了类似这样的实现。通过不断优化和改进,可以构建出更完善的图片上传和预览...

    js控制图片大小

    js控制图片大小,并验证图片类型,兼容各浏览器,测试可用

    简单实用的jQuery多尺寸图片上传预览代码

    此外,为了提高用户体验,还可以添加一些额外的功能,比如限制可接受的文件类型(如只允许上传jpg、png等图像文件)、验证图片大小(防止过大文件导致上传缓慢)以及提供取消选择和重新选择图片的选项。还可以考虑...

    Javascript验证上传图片大小[前台处理]_.docx

    在进行图片上传功能时,确保图片大小的验证是非常重要的安全措施。这有助于防止用户上传过大的文件,从而避免服务器资源的过度消耗,提高网站性能,以及优化用户体验。本文主要讨论了两种图片大小验证方法:后台处理...

    php关于上传图片的验证

    后缀名验证是最基础的一种验证方式,它主要检查上传文件的扩展名是否符合预期的图片格式(如.jpg、.png、.gif等)。这种方法简单易行,但安全性较低,因为文件名可以被篡改。以下是一个简单的示例: ```php $...

Global site tag (gtag.js) - Google Analytics