spring mvc 上传图片检测尺寸（不上传到服务端，直接在客户端显示）

2017-11-13 12:56:51 298 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Java POI Zip炸弹检测机制详解：原理、配置与安全实践在Java后端开发中，文件上传与处理是常见需求，而安全威胁如Zip炸弹攻击常被忽视。Zip炸弹是一种通过极高压缩比构造的恶意文件，旨在耗尽服务器资源，引发拒绝服务。Apache POI库内置了ZipSecureFile安全机制，通过检查最小压缩比率、最大条目大小等阈值来防御此类攻击。理解压缩原理与安全检测逻辑，对于构建健壮的文件处理系统至关重要。本文以POI处理Excel/Word文件时遇到的“Zip bomb detected”错误为切入点，深入解析其检测原理，并提供全局配置、局部调整等实战方案，帮助开发阅读详情

需求描述：要做图标上传，限制大小18*18，想用js判断图片的尺寸，不想把文件上传到服务端后再判断尺寸。
思路：将客户端input file选择的图片赋值给临时的<img/ >对象，然后读取img对象的offsetWidth和offsetHeight属性判断尺寸
是否符合18*18的要求。
问题：写静态页面可以实现，通过赋值给临时的img对象，页面上可以显示出图片，并且获得尺寸大小。但是将静态页面完全拷贝到web工程后，在spring mvc框架下启动tomcat来访问，img对象无法正常显示出图片，并且无论选择什么图片，获取到的尺寸都是一样的28*30.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>



<script type="text/javascript">

	

	function checkSize() {

		var obj = document.getElementById("content");

		var img = null;  

		img = document.getElementById("test"); 

		//document.body.insertAdjacentElement("beforeend",img); 

		//img.style.visibility="hidden";   

		img.src = obj.value; alert(img.src);

		var imgwidth = img.offsetWidth;  

		var imgheight = img.offsetHeight;

		alert(imgwidth + ":" + imgheight);  

	}

	

</script>



<body>



<form>



	<input type="file" id="content" name="content" onchange="checkSize()" />

    <img id="test" name="test" src="" />

	<input type="button" id="btn" name="btn" value="检测图标大小" onclick="checkSize();" />

</form>



</body>

</html>

...全文

密集行人检测实战：YOLO+SpringBoot+大模型全栈实现目标检测是计算机视觉的核心任务，YOLO系列模型凭借实时性与精度平衡成为工程首选。在密集行人场景中，需解决遮挡与小目标漏检问题。结合SpringBoot构建服务端，调度检测任务并管理数据，再接入千问、DeepSeek等大模型API完成语义分析，将结构化检测结果转化为人群密度评估与风险提示。Vue3实现前后端分离界面，形成从模型推理到业务展示的完整链路。本文从数据增强、模型选型、后端集成到智能分析，梳理一套可复用的全栈实践方案。阅读详情

xinjirufen1

Web 开发 81,108 成员 341,721 内容

+ 关注 + 加入社区

切换为时间正序

110成成 2017-11-14

打赏
举报

用springmvc 和tomcat 加载时，你打印路径了吗？

什么都不能 2017-11-13

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <script type="text/javascript"> function checkSize() { var oFile = document.getElementById('content').files[0]; var obj = document.getElementById("content"); var oImage = document.getElementById('test'); // prepare HTML5 FileReader var oReader = new FileReader(); oReader.onload = function(e){ // e.target.result contains the DataURL which we will use as a source of the image oImage.src = e.target.result; oImage.onload = function () { // binding onload event sResultFileSize = bytesToSize(oFile.size) // we are going to display some custom image information here console.log('binary size:'+oFile.size); console.log('Name: ' + oFile.name); console.log('Size: ' + sResultFileSize); console.log('Type: ' + oFile.type); console.log('Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight); }; }; // read selected file as DataURL oReader.readAsDataURL(oFile); } function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB']; if (bytes == 0) return 'n/a'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; }; </script> <body> <form> <input type="file" id="content" name="content" onchange="checkSize()" /> <img id="test" name="test" src="" /> <input type="button" id="btn" name="btn" value="检测图标大小" onclick="checkSize();" /> </form> </body> </html>

xinjirufen1 2017-11-13

打赏
举报

引用 1 楼 xwn_2016 的回复:

看看有没有ID冲突，代码try catch一下，看看报什么错，或者打印一下

应该不是ID冲突或者异常原因，相同的html代码直接运行是可以获得到图标正确尺寸，拿到web工程中运行获得的是错误尺寸。我怀疑是spring mvc 对应url路径解析问题

xinjirufen1 2017-11-13

打赏
举报

xwn_2016 2017-11-13

打赏
举报

看看有没有ID冲突，代码try catch一下，看看报什么错，或者打印一下

spring mvc 上传图片检测尺寸（不上传到服务端，直接在客户端显示）

相关推荐