springmvc上传图片并显示图片--支持多图片上传

实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。

开始需要在pom.xml加入几个jar,分别是:

		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>

接下来,在Springmvc的配置加入上传文件的配置(PS:我把springmvc的完整配置都展现出来):

	<!--默认的mvc注解映射的支持 -->
	<mvc:annotation-driven/>
	<!-- 处理对静态资源的请求 -->
	<mvc:resources location="/static/" mapping="/static/**" />
	<!-- 扫描注解 -->
	<context:component-scan base-package="com.ztz.springmvc.controller"/>
	<!-- 视图解析器 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> 
        <!-- 前缀 -->
		<property name="prefix" value="/WEB-INF/jsp/"/>
		<!-- 后缀 -->
		<property name="suffix" value=".jsp"/>
	</bean>
	<!-- 上传文件 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="utf-8"/>
		<!-- 最大内存大小 -->
		<property name="maxInMemorySize" value="10240"/>
		<!-- 最大文件大小,-1为不限制大小 -->
		<property name="maxUploadSize" value="-1"/>
	</bean>

一、 单文件上传

当然在一个表单中,需要添加enctype="multipart/form-data",一个表单有文件域,肯定也有基本的文本框,可以一次性提交,springmvc能给我们区别出来,来做不同的处理。首先看下普通的model

package com.ztz.springmvc.model;

public class Users {
	private String name;
	private String password;
	//省略get set方法
	
	//重写toString()方便测试
	@Override
	public String toString() {
		return "Users [name=" + name + ", password=" + password +  "]";
	}
}

这个是表单的JSP页面:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FileUpload</title>
</head>
<body>
<form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
	<label>用户名:</label><input type="text" name="name"/><br/>
	<label>密 码:</label><input type="password" name="password"/><br/>
	<label>头 像</label><input type="file" name="file"/><br/>
	<input type="submit" value="提  交"/>
</form>
</body>
</html>
上传成功跳转的JSP页面,并且显示出上传图片:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>头像</title>
</head>
<body>
<img src="${basePath}${imagesPath}">
</body>
</html>

最后是Controller:

package com.ztz.springmvc.controller;

import java.io.File;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.ztz.springmvc.model.Users;

@Controller
@RequestMapping("/file")
public class FileUploadController {
	
	@RequestMapping(value="/upload",method=RequestMethod.POST)
	private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,
			HttpServletRequest request)throws Exception{
		//基本表单
		System.out.println(users.toString());
		
		//获得物理路径webapp所在路径
		String pathRoot = request.getSession().getServletContext().getRealPath("");
		String path="";
		if(!file.isEmpty()){
			//生成uuid作为文件名称
			String uuid = UUID.randomUUID().toString().replaceAll("-","");
			//获得文件类型(可以判断如果不是图片,禁止上传)
			String contentType=file.getContentType();
			//获得文件后缀名称
			String imageName=contentType.substring(contentType.indexOf("/")+1);
			path="/static/images/"+uuid+"."+imageName;
			file.transferTo(new File(pathRoot+path));
		}
		System.out.println(path);
		request.setAttribute("imagesPath", path);
		return "success";
	}
	//因为我的JSP在WEB-INF目录下面,浏览器无法直接访问
	@RequestMapping(value="/forward")
	private String forward(){
		return "index";
	}
}


点击提交控制台输出:

Users [name=fileupload, password=test]


浏览器显示结果:



二、 多图片上传

springmvc实现多图片上传也很简单,我们把刚才的例子修改下,在加一个文件域,name的值还是相同

<body>
<form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
	<label>用户名:</label><input type="text" name="name"/><br/>
	<label>密 码:</label><input type="password" name="password"/><br/>
	<label>头 像1</label><input type="file" name="file"/><br/>
	<label>头 像2</label><input type="file" name="file"/><br/>
	<input type="submit" value="提  交"/>
</form>
</body>

展示图片来个循环,以便显示多张图片

<body>
<c:forEach items="${imagesPathList}" var="image">
	<img src="${basePath}${image}"><br/>
</c:forEach>
</body>

控制层代码如下:

package com.ztz.springmvc.controller;

import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.ztz.springmvc.model.Users;

@Controller
@RequestMapping("/file")
public class FileUploadController {
	
	@RequestMapping(value="/upload",method=RequestMethod.POST)
	private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,
			HttpServletRequest request)throws Exception{
		//基本表单
		System.out.println(users.toString());
		
		//获得物理路径webapp所在路径
		String pathRoot = request.getSession().getServletContext().getRealPath("");
		String path="";
		List<String> listImagePath=new ArrayList<String>();
		for (MultipartFile mf : file) {
			if(!mf.isEmpty()){
				//生成uuid作为文件名称
				String uuid = UUID.randomUUID().toString().replaceAll("-","");
				//获得文件类型(可以判断如果不是图片,禁止上传)
				String contentType=mf.getContentType();
				//获得文件后缀名称
				String imageName=contentType.substring(contentType.indexOf("/")+1);
				path="/static/images/"+uuid+"."+imageName;
				mf.transferTo(new File(pathRoot+path));
				listImagePath.add(path);
			}
		}
		System.out.println(path);
		request.setAttribute("imagesPathList", listImagePath);
		return "success";
	}
	//因为我的JSP在WEB-INF目录下面,浏览器无法直接访问
	@RequestMapping(value="/forward")
	private String forward(){
		return "index";
	}
}




PS:本demo地址:http://download.csdn.net/detail/zwz568017880/9043089


Spring MVC 提供了文件上传支持,可以使用 MultipartFile 类型来接收上传的文件。以下是图片上传回显的步骤: 1. 在前端页面中添加一个表单,其中包含一个文件选择器用于选择要上传图片文件,并设置表单的 enctype 为 "multipart/form-data"。 2. 在后端的控制器中定义一个处理文件上传的方法,并使用 @RequestParam 注解来接收上传图片文件。例如: ``` @RequestMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) { // 处理上传的文件 return "redirect:/image"; // 重定向到显示图片的方法 } ``` 3. 在处理上传的方法中可以进行文件的存储操作,例如将文件保存到本地的文件系统或将文件存储到数据库。 4. 在显示图片的方法中,可以通过文件的路径或存储的唯一标识来获取图片,并将图片返回给前端页面。例如: ``` @RequestMapping("/image") public void showImage(HttpServletResponse response) throws IOException { // 从存储位置获取图片,如从文件系统获取或从数据库获取 File imageFile = new File("path/to/image.jpg"); // 设置响应的 Content-Type 为 image/jpeg response.setContentType(MediaType.IMAGE_JPEG_VALUE); // 将图片写入响应的输出流中 FileInputStream fileInputStream = new FileInputStream(imageFile); IOUtils.copy(fileInputStream, response.getOutputStream()); fileInputStream.close(); response.getOutputStream().close(); } ``` 5. 在前端页面中,可以使用 img 标签来显示图片,设置其 src 属性为显示图片的方法的 URL。例如: ``` <img src="/image" alt="Image"> ``` 通过以上步骤,我们可以实现图片上传回显的功能。
评论 37
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值