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

xinjirufen1 2017-11-13 12:56:51

需求描述：要做图标上传，限制大小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>

...全文

236 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

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