html图片上传的一个例子

最新推荐文章于 2022-10-23 19:48:25 发布

HAK_Bin

最新推荐文章于 2022-10-23 19:48:25 发布

阅读量503

点赞数

本文链接：https://blog.csdn.net/u010969815/article/details/100701358

版权

JAVA 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

SpringMVC

1 篇文章 0 订阅

订阅专栏

html前端代码，在网上找了别人的代码做了一个业务融合测试，亲测可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传图片</title>
</head>
<body>
    <form action="http://localhost/common/uploadImage/" method="POST" name="xiangmu" id="xiangmu"
		enctype="multipart/form-data">
		<table>
			<tr>
				<td>图片上传：</td>
				<td><input type="file" name="images" id="doc"
					onchange="showImage();">
				</td>
				<div id="localImag">
					<img id="preview" width=-1 height=-1 style="diplay:none" />
				</div>
			</tr>
			<tr>
				<td><input type="submit" value="提交" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
<script type="text/javascript">
	function showImage() {
		var docObj = document.getElementById("doc");
		var imgObjPreview = document.getElementById("preview");
		if (docObj.files && docObj.files[0]) {
			//火狐下，直接设img属性  
			imgObjPreview.style.display = 'block';
			imgObjPreview.style.width = '300px';
			imgObjPreview.style.height = '120px';
			//imgObjPreview.src = docObj.files[0].getAsDataURL();  
			//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
			imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
		} else {
			//IE下，使用滤镜  
			docObj.select();
			var imgSrc = document.selection.createRange().text;
			var localImagId = document.getElementById("localImag");
			//必须设置初始大小  
			localImagId.style.width = "250px";
			localImagId.style.height = "200px";
			//图片异常的捕捉，防止用户修改后缀来伪造图片 
			try {
				localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId.filters
						.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
			} catch (e) {
				alert("您上传的图片格式不正确，请重新选择!");
				return false;
			}
			imgObjPreview.style.display = 'none';
			document.selection.empty();
		}
		return true;
	}
</script>

springmvc配置

<!-- 文件上传大小限制 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 设定默认编码 -->
		<property name="defaultEncoding" value="UTF-8"></property>
		<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
		<property name="maxUploadSize" value="5242880"></property>
	</bean>

java代码

@Override
	public UploadImageResp uploadImage(UploadImageReq req) throws Exception {
		UploadImageResp resp = new UploadImageResp();
		Map<String, String> pathMap = new HashMap<String, String>();
		MultipartFile[] images = req.getImages();
		if (images != null && images.length > 0) {
			for (int i = 0; i < images.length; i++) {	
				MultipartFile file = images[i];
				if(file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1).equals("jpg") ||
						file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1).equals("png")||
						file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1).equals("jpeg")){
					// 保存文件
					saveFile(file,pathMap);
				}
			}
		}
		resp.setPathMap(pathMap);
		return resp;
	}

	private synchronized void saveFile(MultipartFile file, Map<String, String> pathMap) {
		// 判断文件是否为空
		if (!file.isEmpty()) {
			try {
				String fileName = System.currentTimeMillis() +"_"+file.getOriginalFilename();
				String filePath = "/mnt/grid/images/"+fileName;
				File saveDir = new File(filePath);
				if (!saveDir.getParentFile().exists())
					saveDir.getParentFile().mkdirs();
				// 转存文件
				file.transferTo(saveDir);
				pathMap.put(file.getOriginalFilename(), "/images/"+fileName);
			} catch (Exception e) {
				LOG.error(e.getMessage());
			}
		}
	}

HAK_Bin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html图片上传的一个例子

html前端代码，在网上找了别人的代码做了一个业务融合测试，亲测可用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
复制链接

扫一扫

专栏目录