|
|
|
步骤 2 : 模仿和排错 步骤 3 : 效果 步骤 4 : 配置web.xml允许访问*.jpg 步骤 5 : 配置springmvc-servlet.xml 步骤 6 : upload.jsp 上传页面 步骤 7 : 准备UploadedImageFile 步骤 8 : UploadController 上传控制器 步骤 9 : showUploadedFile.jsp 显示图片的页面 步骤 10 : 测试 步骤 11 : 练习
老规矩，先下载右上角的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
访问地址：
http://127.0.0.1:8080/springmvc/upload.jsp 这个通过springmvc上传图片，并显示的效果
在web.xml中新增加一段
<servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.jpg</url-pattern> </servlet-mapping> 表示允许访问*.jpg。 为什么要加这一段呢？ 因为配置springmvc的servlet的时候，使用的路径是"/"，导致静态资源在默认情况下不能访问，所以要加上这一段，允许访问jpg。 并且必须加在springmvc的servlet之前 如果你配置spring-mvc使用的路径是/*.do，就不会有这个问题了。 注： 这里仅仅是允许访问jpg,如果你要显示png,gif那么需要额外进行配置 <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.jpg</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
新增加一段配置
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/> 开放对上传功能的支持 <?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"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="controller" />
<bean id="irViewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/page/" />
<property name="suffix" value=".jsp" />
</bean>
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
</beans>
<?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" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd"> <context:component-scan base-package="controller" /> <bean id="irViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/page/" /> <property name="suffix" value=".jsp" /> </bean> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/> </beans>
上传页面，需要注意的是form 的两个属性必须提供
method="post" 和 enctype="multipart/form-data" 缺一不可 上传组件 增加一个属性 accept="image/*" 表示只能选择图片进行上传 留意 <input type="file" name="image" accept="image/*" /> 这个image，后面会用到这个image <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%>
<form action="uploadImage" method="post" enctype="multipart/form-data">
选择图片:<input type="file" name="image" accept="image/*" /> <br>
<input type="submit" value="上传">
</form>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%> <form action="uploadImage" method="post" enctype="multipart/form-data"> 选择图片:<input type="file" name="image" accept="image/*" /> <br> <input type="submit" value="上传"> </form>
在UploadedImageFile中封装MultipartFile类型的字段 image ，用于接受页面的注入
这里的字段 image必须和上传页面upload.jsp中的image <input type="file" name="image" accept="image/*" /> 保持一致 package pojo;
import org.springframework.web.multipart.MultipartFile;
public class UploadedImageFile {
MultipartFile image;
public MultipartFile getImage() {
return image;
}
public void setImage(MultipartFile image) {
this.image = image;
}
}
package pojo;
import org.springframework.web.multipart.MultipartFile;
public class UploadedImageFile {
MultipartFile image;
public MultipartFile getImage() {
return image;
}
public void setImage(MultipartFile image) {
this.image = image;
}
}
新建类UploadController 作为上传控制器
准备方法upload 映射上传路径/uploadImage 1. 方法的第二个参数UploadedImageFile 中已经注入好了 image 2. 通过 RandomStringUtils.randomAlphanumeric(10);获取一个随机文件名。 因为用户可能上传相同文件名的文件，为了不覆盖原来的文件，通过随机文件名的办法来规避 3. 根据request.getServletContext().getRealPath 获取到web目录下的image目录，用于存放上传后的文件。 4. 调用file.getImage().transferTo(newFile); 复制文件 5. 把生成的随机文件名提交给视图，用于后续的显示 package controller;
import java.io.File;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang.xwork.RandomStringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import pojo.UploadedImageFile;
@Controller
public class UploadController {
@RequestMapping("/uploadImage")
public ModelAndView upload(HttpServletRequest request, UploadedImageFile file)
throws IllegalStateException, IOException {
String name = RandomStringUtils.randomAlphanumeric(10);
String newFileName = name + ".jpg";
File newFile = new File(request.getServletContext().getRealPath("/image"), newFileName);
newFile.getParentFile().mkdirs();
file.getImage().transferTo(newFile);
ModelAndView mav = new ModelAndView("showUploadedFile");
mav.addObject("imageName", newFileName);
return mav;
}
}
在WEB-INF/page 下新建文件showUploadedFile 显示上传的图片
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<img src="image/${imageName}"/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<img src="image/${imageName}"/>
访问页面
http://127.0.0.1:8080/springmvc/upload.jsp 选择jpg文件进行上传
修改配置，以支持动态图片gif
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2023-11-14
idea显示500 > - <
1 个答案
279844782abc 跳转到问题位置 答案时间：2023-11-14 String name = RandomStringUtils.randomAlphanumeric(10);
StringBuilder sb=new StringBuilder(name);
sb.append(".jpg");
String newFileName=sb.toString();
//String newFileName=name + ".jpg";//不可用，会报错500
搞好了搞好了，我的upload.jsp放WEB-INF里了，而且根据提问区里大神的提议修改了一下代码就能运行了
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2022-12-30
网站找不到上传的图片
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-08-19
这图片实在是需要评论一下啊
2021-05-07
为啥实际不用修改也能支持gif、png呢
2020-10-27
数据库图片的设计是怎么样的？
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 78 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
