SpringMvc中实现文件上传和下载——前端使用html+jquery+ajax
发布日期:2021-05-04 18:18:22 浏览次数:13 分类:原创文章

本文共 12371 字,大约阅读时间需要 41 分钟。


下面步骤中主要讲解如何实现文件上传,关于SSM的详细配置见



项目的相关结构如下
在这里插入图片描述


1)导入相应的maven依赖


<properties>    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>    <maven.compiler.source>1.7</maven.compiler.source>    <maven.compiler.target>1.7</maven.compiler.target>    <spring.version>4.3.7.RELEASE</spring.version>  </properties>  <dependencies>    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>4.11</version>      <scope>test</scope>    </dependency>    <!-- 1.日志 -->    <!-- 实现slf4j接口并整合 -->    <dependency>      <groupId>ch.qos.logback</groupId>      <artifactId>logback-classic</artifactId>      <version>1.2.1</version>    </dependency>    <!-- 3.Servlet web -->    <dependency>      <groupId>taglibs</groupId>      <artifactId>standard</artifactId>      <version>1.1.2</version>    </dependency>    <dependency>      <groupId>jstl</groupId>      <artifactId>jstl</artifactId>      <version>1.2</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-databind</artifactId>      <version>2.8.7</version>    </dependency>    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>javax.servlet-api</artifactId>      <version>3.1.0</version>    </dependency>    <!-- 4.Spring -->    <!-- 1)Spring核心 -->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-core</artifactId>      <version>${
spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${
spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${
spring.version}</version> </dependency> <!-- 2)Spring DAO层 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${
spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${
spring.version}</version> </dependency> <!-- 3)Spring web --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${
spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${
spring.version}</version> </dependency> <!-- 4)Spring test --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${
spring.version}</version> </dependency> <!-- Map工具类 --> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2</version> </dependency> <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> </dependencies>



2)SpringMvc的相关配置


spring-web.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-3.2.xsd">    <!--开启SpringMvc注解模式-->    <mvc:annotation-driven/>    <!--静态资源默认servlet配置    (1)加入对静态资源的处理:js,gif,png    (2)允许使用"/"做整体映射-->    <mvc:resources mapping="/resources/**" location="/resources/"/>    <mvc:default-servlet-handler/>    <!--定义视图解析器-->    <bean id="viewResolver"          class="org.springframework.web.servlet.view.InternalResourceViewResolver">        <property name="prefix" value="/WEB-INF/html/"></property>        <property name="suffix" value=".html"></property>    </bean>    <!--文件上传解析器-->    <bean id="multipartResolver"          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        <property name="defaultEncoding" value="utf-8"></property>        <property name="maxUploadSize" value="10485760000"></property><!-- 最大上传文件大小 -->        <property name="maxInMemorySize" value="10960"></property>    </bean>    <!-- 在spring-mvc.xml文件中加入这段配置后,spring返回给页面的都是utf-8编码了 -->    <bean            class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">        <property name="messageConverters">            <list>                <bean                        class="org.springframework.http.converter.StringHttpMessageConverter">                    <property name="supportedMediaTypes">                        <list>                            <value>text/html;charset=UTF-8</value>                        </list>                    </property>                </bean>            </list>        </property>    </bean>    <!-- 4.扫描web相关的bean(相关的Controller类) -->    <context:component-scan base-package="com.sakura.web" /></beans>

web.xml


<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_3_1.xsd"         version="3.1" metadata-complete="true">  <display-name>Archetype Created Web Application</display-name>  <servlet>    <servlet-name>spring-dispatcher</servlet-name>    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    <init-param>      <param-name>contextConfigLocation</param-name>      <param-value>classpath:spring/spring-*.xml</param-value>    </init-param>  </servlet>  <servlet-mapping>    <servlet-name>spring-dispatcher</servlet-name>    <!--默认匹配所有的请求-->    <url-pattern>/</url-pattern>  </servlet-mapping></web-app>



3)前台页面upload.html和download.html


upload.html


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>文件上传</title></head><body><span id="warn" style="color: red"></span><br><input type="file" id="file"><br><input type="button" id="submit" value="上传"></body><script type="text/javascript" src="../resources/js/jquery-3.3.1.min.js"></script><script>    $(function () {
var url = "/file/upload"; $('#submit').click(function () {
//获取上传的文件流 var file = $('#file')[0].files[0]; if (file==''||!file){
$('#warn').text('请选择文件'); } else {
var formData = new FormData(); formData.append("file",file); $.ajax({
url:url, type:'POST', data:formData, contentType:false, processData:false, success:function (data) {
if (data.success){
$('#warn').text(''); alert(data.errMsg); } else {
$('#warn').text(data.errMsg); } } }) } }) })</script></html>

download.html


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><a href="/file/download?fileName=file.txt">file.txt</a></body></html>



4)后台Controller层中的FrontendController.java和FileUploadController.java


FrontendController.java


@Controller@RequestMapping("/frontend")public class FrontendController {
/** * 文件上传页面 * @return */ @RequestMapping(value = "/upload",method = RequestMethod.GET) public String FileUpload(){
return "file/upload"; } /** * 文件下载页面 * @return */ @RequestMapping(value = "/download",method = RequestMethod.GET) public String FikeDownload(){
return "file/download"; }}

FileUploadController.java


@Controller@RequestMapping("/file")public class FileUploadController {
/** * 文件上传 */ @ResponseBody @RequestMapping(value = "/upload",method = RequestMethod.POST) public HashMap<String,Object> fileUpload(HttpServletRequest request){
HashMap<String,Object> modelMap = new HashMap<>(); //获取文件输入流 MultipartHttpServletRequest multipartHttpServletRequest = null; CommonsMultipartFile file = null; CommonsMultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext()); //判断是否上传了文件 if (resolver.isMultipart(request)){
multipartHttpServletRequest = (MultipartHttpServletRequest) request; file = (CommonsMultipartFile) multipartHttpServletRequest.getFile("file"); //获取上传文件的原始名称 String originalFilename = file.getOriginalFilename(); //设置上传文件的保存地址目录(这里我设置在本地D盘中) System.out.println("request.getServletContext().getRealPath(\"/upload\"):"+request.getServletContext().getRealPath("/upload")); String dirPath = "d:/Sakura/upload/"; //如果保存文件的地址不存在,就先创建目录 File filePath = new File(dirPath); if (!filePath.exists()){
filePath.mkdirs(); } //使用UUID从命名上传的文件名称 String newFilename = UUID.randomUUID() + "_" + originalFilename; try {
//使用CommonsMultipartFile完成文件上传到指定位置 file.transferTo(new File(dirPath+newFilename)); } catch (IOException e) {
modelMap.put("success",false); modelMap.put("errMsg",e.getMessage()); return modelMap; } modelMap.put("success",true); modelMap.put("errMsg","文件上传成功"); }else {
modelMap.put("success",false); modelMap.put("errMsg","未上传文件"); } return modelMap; } @RequestMapping(value = "/download",method = RequestMethod.GET) public ResponseEntity<byte[]> fileDownload(HttpServletRequest request, HttpServletResponse response,String fileName) throws Exception {
//若传入的文件名有中文等非英文字符则直接报错:由于被认为是客户端对错误(例如:畸形的请求语法、无效的请求信息帧或者虚拟的请求路由),服务器无法或不会处理当前请求。 //所以,要假定在浏览器发出的下载请求(就是由用户点击超链接而引起),传入的fileName参数的值不能含中文等字符。 System.out.println(fileName); //这里下载的文件在我电脑中的D:/Sakura/upload/file.txt中 String dirPath = "D:"+File.separator+"Sakura"+File.separator+"upload"; //创建该文件对象 File file = new File(dirPath+File.separator+fileName); System.out.println(file.toString()+" "+file.exists()); if (!file.exists()){
request.setAttribute("theMessage", "<script>alert('文件已不存在!');</script>"); request.getRequestDispatcher("download.jsp").forward(request, response); return null; } else {
// 对文件名编码,防止中文文件乱码 fileName = this.getFilename(request, fileName); // 设置响应头 HttpHeaders headers = new HttpHeaders(); // 通知浏览器以下载的方式打开文件 headers.setContentDispositionFormData("attachment", fileName); // 定义以流的形式下载返回文件数据 headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); // 使用Spring MVC框架的ResponseEntity对象封装返回下载数据 return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file), headers, HttpStatus.OK); // HttpStatus.OK 是200 } } /** * 根据浏览器的不同进行编码设置,返回编码后的文件名 */ public String getFilename(HttpServletRequest request, String fileName) throws Exception {
// IE不同版本User-Agent中出现的关键词 String[] IEBrowserKeyWords = {
"MSIE", "Trident", "Edge"}; // 获取请求头代理信息 String userAgent = request.getHeader("User-Agent"); for (String keyWord : IEBrowserKeyWords) {
if (userAgent.contains(keyWord)) {
//IE内核浏览器,统一为UTF-8编码显示 return URLEncoder.encode(fileName, "UTF-8"); } } //火狐等其它浏览器统一为ISO-8859-1编码显示 return new String(fileName.getBytes("UTF-8"), "ISO-8859-1"); }}

运行效果(开启Tomcat)


文件上传
在这里插入图片描述
在这里插入图片描述在这里插入图片描述




文件下载
在这里插入图片描述在这里插入图片描述

上一篇:Java高并发系列(读书笔记)——关键字synchronized的功能扩展:重入锁
下一篇:LeetCode-560. 和为K的子数组——前缀和+哈希表

发表评论

最新留言

不错!
[***.144.177.141]2025年03月12日 03时47分26秒