IDEA中Spring MVC实现图片上传并显示

我们都知道web项目需要部署到tomcat服务器中运行

那么，我们又是如何通过tomcat来访问存放在本地磁盘中的图片呢？，通过tomcat访问本地图片，需要配置虚拟路径，下面介绍两种配置虚拟路径的方式：

1、使用 IDEA 设置虚拟路径
2、在 Tomcat 中设置虚拟路径

如果不配置虚拟路径，我们使用Spring MVC上传的图片就无法正常显示，我在学习使用Spring MVC上传图片时就遇到过这样的问题，图片上传成功了，但无法让图片在浏览器中显示

使用 IDEA 设置虚拟路径

1、先创建一个Spring MVC项目，将项目部署到tomcat中

2、在Output directory目录下创建 image 文件夹，用来保存上传的图片，在编写文件上传代码时，就可以通过request.getServletContext().getRealPath("/image/"); 获取到该目录，然后指定图片上传到该目录中

request.getServletContext().getRealPath(""); 方法用于获取Output directory目录的路径

如果指定其它目录保存上传的图片，比如在WEB-INF目录下创建一个image文件夹来保存上传的图片，就不能通过String path=request.getServletContext().getRealPath("/image/"); 方法来获取该目录，它是用来获取Output directory目录的路径的

而是通过String path="E:\ideaUI\javaworkspace\springmvcTest\web\WEB-INF\image"; 来指定图片保存目录

3、Run → Edit Configurations . . . → Deployment → + → External Source . . .

4、选择保存上传图片的磁盘路径，并设置虚拟路径为/img
配置成功后，就可以通过 localhost：8080/img/图片名称全称 访问到图片

在 Tomcat 中设置虚拟路径

1、进入tomcat安装目录，找到conf文件夹下的server.xml文件

2、在标签中添加 <Context path="/img" docBase="E:\ideaUI\javaworkspace\springmvcTest\out\artifacts\springmvcTest_war_exploded\image" reloadable="true"/> 设置虚拟路径

path="/img" → 是虚拟路径
docBase=“E:\ideaUI\javaworkspace\springmvcTest\out\artifacts\springmvcTest_war_exploded\image” → 是磁盘中保存图片的真实目录

3、Run → Edit Configurations . . . → 勾选 Deploy applications configured in Tomcat instance

配置成功后，就可以通过 localhost：8080/img/图片名称全称 访问到图片

单个图片上传

上传文件所需jar包

commons-fileupload-1.2.2.jar
commons-io-2.4.jar

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><!--加载spring配置文件applicationContext.xml--><context-param><param-name>contextConfigLocation</param-name><param-value>/WEB-INF/applicationContext.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!--配置Spring MVC的入口 DispatcherServlet, 把所有的请求都提交到该Servlet--><servlet><servlet-name>dispatcher</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><!-- 配置springmvc的前端控制器，可以配置多个前端控制器来拦截不同的url --><servlet-mapping><servlet-name>dispatcher</servlet-name><!--将DispatcherServlet请求映射配置为 “/”,则所有的URL请求都会被Spring MVC的DispatcherServlet截获--><url-pattern>/</url-pattern></servlet-mapping>

在Spring MVC的配置文件dispatcher-servlet.xml中配置multipartResolver文件上传解析器

<!--multipartResolver文件上传解析器--><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!--限制上传文件的最大字节数,1024个字节为1kB,即上传的文件不能大于100KB--><property name="maxUploadSize" value="1024000"/> <!-- 10M --><!--设置请求的编码格式为UTF-8,默认为iso-8859-1--><property name="defaultEncoding" value="UTF-8"/></bean>

这是dispatcher-servlet.xml文件的全部代码

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"><!--扫描器--><context:component-scan base-package="com.CD4356.controller"/><!--配置<mvc:annotation-driven>,否则无法@Controller注解无法被解析--><mvc:annotation-driven/><!--viewResolver视图解析器--><bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/page/"/><property name="suffix" value=".jsp"/></bean><!--multipartResolver文件上传解析器--><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!--限制上传文件的最大字节数,1024个字节为1kB,即上传的文件不能大于100KB--><property name="maxUploadSize" value="1024000"/> <!-- 10M --><!--设置请求的编码格式为UTF-8,默认为iso-8859-1--><property name="defaultEncoding" value="UTF-8"/></bean></beans>

在WEB-INF下创建page目录，用来存放jsp、html等文件，在page中创建uploadFile.jsp文件

<form>中method="post" 和 enctype="multipart/form-data" 二者缺一不可

method="post" 以post方式提交表单，该方式对提交数据的大小没有限制
enctype="multipart/form-data" 表示数据以二进制格式进行提交，负责上传文件的表单必须为该编码类型

<input>中添加accept="image/*" ，表示提交的文件只能为图片，若没有添加该内容，则图片、文档等类型的文件都可以提交

<%--Created by IntelliJ IDEA.User: CD4356Date: 2019/3/24Time: 18:42To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>单个文件上传</title>
</head>
<body><h2><font color="#a52a2a" size="4">图片上传</font></h2><form action="uploadFile" method="post" enctype="multipart/form-data"><input type="file" name="uploadFile" accept="image/*"><br><br><input type="submit" value="上传">
</form></body>
</html>

在src代码目录下创建com.CD4356.controller包，在包中创建控制器类UploadController

在UploadController类中定义一个start方法，用来跳转到uploadFile.jsp

package com.CD4356.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class UploadController {@RequestMapping(value = "start")public String start(){return "uploadFile";}}

在类中添加uploadFile()方法，用来处理上传的图片

package com.CD4356.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;@Controller
public class UploadController {@RequestMapping(value = "start")public String start(){return "uploadFile";}// 单个图片上传@RequestMapping(value = "/uploadFile")// 使用HttpServletRequest需导入javax.servlet-api-4.0.1.jar// 上传的文件自动绑定到MultipartFile中public String uploadFile(@RequestParam("uploadFile") MultipartFile uploadFile , HttpServletRequest request) throws IOException {// 判断文件是否成功上传if(uploadFile!=null){// 指定上传图片的保存路径String path=request.getServletContext().getRealPath("/image/");// 获取上传的文件名全称String fileName=uploadFile.getOriginalFilename();// 获取上传文件的后缀名String suffix=fileName.substring(fileName.lastIndexOf("."));// 给文件定义一个新的名称,杜绝文件重名覆盖现象String newFileName= UUID.randomUUID().toString()+suffix;// 创建File对象,注意这里不是创建一个目录或一个文件,你可以理解为是 获取指定目录中文件的管理权限(增改删除判断等 . . .)File tempFile=new File(path);// 判断File对象对应的目录是否存在if(!tempFile.exists()){// 创建以此抽象路径名命名的目录,注意mkdir()只能创建一级目录,所以它的父级目录必须存在tempFile.mkdir();}// 在指定路径中创建一个文件(该文件是空的)File file=new File(path + newFileName);// 将上传的文件写入指定文件uploadFile.transferTo(file);// 将新文件名添加到HttpServletRequestrequest.setAttribute("newFileName",newFileName);}return "uploadFile";}}

Spring MVC 会将上传文件绑定到 MultipartFile 对象中。MultipartFile 提供了获取上传文件内容、文件名等内容，通过其 transferTo() 还可将文件转存到硬盘中

具体如下：

byte[] getBytes()：获取文件数据
String getOriginalFilename()：获取上传文件原名全称
boolean isEmpty()：是否有上传的文件，文件是否为null
long getSize()：获取文件的字节大小，单位为byte
void transferTo(File dest)：将上传文件转存到一个目标文件中

添加图片显示功能

<%--Created by IntelliJ IDEA.User: CD4356Date: 2019/3/24Time: 18:42To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>单个文件上传</title>
</head>
<body><h2><font color="#a52a2a" size="4">图片上传</font></h2><form action="uploadFile" method="post" enctype="multipart/form-data"><input type="file" name="uploadFile" accept="image/*"><br><br><input type="submit" value="上传">
</form><br>
<h2><font color="#a52a2a" size="4">图片显示</font></h2><img src="img/${newFileName}" width="200px" height="180px">
<br>
<h4><font color="#a52a2a" size="4">文件名: ${newFileName}</font></h4></body>
</html>

效果图展示：

同时上传多个图片

在page中创建uploadMultipleFile.jsp文件

<%--Created by IntelliJ IDEA.User: CD4356Date: 2019/3/24Time: 18:42To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>多个文件同时上传</title>
</head>
<body><div style="float:left">
<h2><font color="#a52a2a" size="4">图片上传</font></h2>
<form action="uploadMultipleFile" method="post" enctype="multipart/form-data"><input type="file" name="uploadFile" accept="image/*"><br><br><input type="file" name="uploadFile" accept="image/*"><br><br><input type="file" name="uploadFile" accept="image/*"><br><br><input type="submit" value="上传">
</form>
</div></body>
</html>

在UploadController类中定义一个jump方法，用来跳转到uploadMultipleFile.jsp

@RequestMapping(value = "/jump")public String jump(){return "uploadMultipleFile";}

在UploadController类中添加uploadMultipleFile方法，用来处理同时上传的多个图片

 // 多个图片上传@RequestMapping(value = "/uploadMultipleFile")public String uploadMultipleFile(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) throws IOException {// 文件存储路径String path = request.getSession().getServletContext().getRealPath("/image/");// 使用HashMap键值对存储上传的文件Map<String,Object> map=new HashMap<>();if(files!=null && files.length>0){for(int i=0;i<files.length;i++) {if (files[i] != null) {// 获取上传的文件名String fileName = files[i].getOriginalFilename();// 在指定路径中创建一个文件(该文件是空的)File file = new File(path + fileName);// 将上传的文件写入指定路径files[i].transferTo(file);map.put(fileName,fileName);}request.setAttribute("map",map);}}return "uploadMultipleFile";}

在uploadMultipleFile.jsp文件中添加多个图片显示功能，使用迭代标签 <c:forEach>对图片输出显示，使用 <c:forEach>标签需导入jstl-1.2.jar包

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--Created by IntelliJ IDEA.User: CD4356Date: 2019/3/24Time: 18:42To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>多个文件同时上传</title>
</head>
<body><div style="float:left">
<h2><font color="#a52a2a" size="4">图片上传</font></h2>
<form action="uploadMultipleFile" method="post" enctype="multipart/form-data"><input type="file" name="files" accept="image/*"><br><br><input type="file" name="files" accept="image/*"><br><br><input type="file" name="files" accept="image/*"><br><br><input type="submit" value="上传">
</form>
</div><div style="flex-flow: nowrap">
<h2><font color="#a52a2a" size="4">上传的图片</font></h2>
<table><tr><c:forEach items="${map}" var="image"><td  style="width: 150px"><img src="img/${image.value}" width="100px" height="100px"></td></c:forEach></tr>
</table>
</div></body>
</html>

效果图展示：

项目下载
链接：https://pan.baidu.com/s/1ULemetlRHcvM4P2QGr_AoA
提取码：2dul
复制这段内容后打开百度网盘手机App，操作更方便哦

IDEA中Spring MVC实现图片上传并显示相关推荐

Spring mvc 做图片上传
Spring MVC做图片上传: 一.配置文件中首先配置文件上传路劲: 二.首先获取配置文件路劲当中的路劲并判断路劲是否存在,不存在用File类的mkdirs()创建:(url) 三.获取文件名称(f ...
ajaxfileupload+spring mvc 单张图片上传
2019独角兽企业重金招聘Python工程师标准>>> //jsp页面 1.首先引入ajaxfileupload.js 2.form一定要配上enctype="multip ...
Mr.张小白（案例：基于Spring MVC实现文件上传和下载）
基于Spring MVC实现文件上传和下载一.步骤 1.引入相关依赖pom.xml <?xml version="1.0" encoding="UTF-8&quo ...
asp.net mvc 上传到服务器图片不显示,ASP.NET MVC实现图片上传、图片预览显示
先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博,言归正传,由于以前的asp.net mvc的练习文件上传文件,显示或是下载等博文,均是存 ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
HTML5输入框里加图片代码,做了一个input上传加号框，图片上传后显示在框中，怎么让加号消失？...
CSS代码: .div_imgall {border:1px solid blue;width:100px;height:100px;position:relative;} .input_flie { ...
java图片加水印上传工具类_基于Spring Boot实现图片上传/加水印一把梭操作
文章共537字,阅读大约需要 2分钟 ! 概述很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 ...
.net使用Easyui+MVC进行图片上传的实现
图片上传使用的是Easyui+MVC,用from表单进行提交,并将图片名称和后缀提交到数据库.有一些功能可能不够完善,欢迎进行补充. 先上效果图下边直接上代码: (1)先在要提交的表单中添加上传框, ...
spring框架的图片上传
使用MultipartFile实现图片上传 MultipartFile为org.springframework.web.mutipart包下的一个类是spring框架为我们提供的, 我们就使用它来完成 ...

IDEA中Spring MVC实现图片上传并显示

IDEA中Spring MVC实现图片上传并显示相关推荐

最新文章

热门文章