ssm图片上传并显示在页面

先展示效果
首页
成功显示

需要两个jar包
commons-fileupload-1.3.2.jar
commons-io-2.5.jar

  1. 首先在 web.xml 中新增加一段
<servlet-mapping> 
	<servlet-name>default</servlet-name> 
	<url-pattern>*.jpg</url-pattern>
	<url-pattern>*.png</url-pattern> 
</servlet-mapping> 

表示允许访问*.jpg,*.png。

为什么要加这一段呢? 因为配置 springmvc 的 servlet 的时候,使用的路径是"/",导致静态资源在默认情况下不 能访问,所以要加上这一段,允许访问 jpg。 并且必须加在 springmvc 的 servlet 之前 .如果你配置 spring-mvc 使用的路径是/*.do,就不会有这个问题了

  1. 在springmvc.xml中添加以下代码,开放对上传功能的支持。不添加会报npe!!
<!-- id 必须是 multipartResolver,内部绑定好,不能改动 --> 
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
  1. 上传页面主要代码
<body> 
	<form action="uploadImage" method="post" enctype="multipart/form-data"> 
	选择图片:<input type="file" name="image" accept="image/*" /><br> 
	<input type="submit" value="上传"> 
	</form> 
</body>

上传页面,需要注意的是 form 的两个属性必须提供 method=“post”enctype=“multipart/form-data” 缺一不可 上传组件 增加一个属性 accept="image/*“表示只能选择图片进行上传,表示会选择所有图片类型 留意 < input type=“file” name=“image” accept="image/” /> 这个 image,后面会用到这个 image

  1. 准备一个工具类UploadedImageFile
    这里的字段 image 必须和上传页面 upload.jsp 中的 image < input type=“file” name="image" accept=“image/*” /> 保持一致
public class UploadedImageFile { 
	MultipartFile image; 
	public MultipartFile getImage() {
		return image; 
	}
	public void setImage(MultipartFile image) { 
		this.image = image; 
	} 
}
  1. 新建 UploadController 上传控制器
@Controller 
public class UploadController { 
	@RequestMapping("/uploadImage") 
	public ModelAndView upload(HttpServletRequest request, UploadedImageFile file) throws IllegalStateException, IOException { 
		// 获取随机文件名 
		//RandomStringUtils类导入jar包位置 https://mvnrepository.com/artifact/org.apache.struts.xwork/xwork-core/2.2.1
		String name = RandomStringUtils.randomAlphanumeric(10);
		// 获取原有文件名称(包括文件类型) 
		String fileName = file.getImage().getOriginalFilename(); 
		// 截取文件类型 
		int indexdot = fileName.indexOf("."); 
		String suffix = fileName.substring(indexdot); 
		// 创建文件,给文件起名字 
		String newFileName = name + suffix; 
		// 创建 File 对象,并设定存放位置和存放文件的文件名 
		File newFile = new 	File(request.getServletContext().getRealPath("/image"), new FileName); // 调用 newFile 这个实例的 getParentFile 方法, 返回它的父目录对象的实例,得到父目录实 例后,接着调用.mkdirs()(是父目录这个实例调用的),创建文件夹。 
		newFile.getParentFile().mkdirs(); 
		// 复制文件,把图片写入磁盘 
		file.getImage().transferTo(newFile); ModelAndView mav = new ModelAndView("showUploadedFile"); 
		mav.addObject("imageName", newFileName); return mav; 
	} 
}
  1. 最后一步,添加返回界面
<body> <img alt="" src="image/${imageName }"> </body>

总结:
1.用到的RandomStringUtils这个类好像很久了,只有老版本才支持,我用的 xwork-core2.21下载地址
2.图片上传地址是其实是在你配置 Tomcat 那个 server.xml 配置的路径的项目下的 image 文件夹中。 注意不是上传到项目中上传的图片放到了服务器里

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值