SpringMVC-文件下载与上传

最新推荐文章于 2024-03-24 13:58:37 发布

helong0102

最新推荐文章于 2024-03-24 13:58:37 发布

阅读量201

点赞数

分类专栏： SpringMVC 文件上传与下载文章标签： SpringMVC-文件下载与上传

本文链接：https://blog.csdn.net/weixin_43478300/article/details/102171120

版权

SpringMVC 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

文件上传与下载

1 篇文章 0 订阅

订阅专栏

SpringMVC-文件下载与上传

1.文件下载

2.文件上传

1).导入相关jar包

2).在springmvc.xml配置文件中装配MultpartResovler

 <!--上传文件配置-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置字符集的编码-->
        <property name="defaultEncoding" value="UTF-8"/>
        <!--最大文件上传尺寸-->
        <property name="maxUploadSize" value="102400"/>
    </bean>

代码示例：

前端请求界面：

<%--文件下载--%>
  <a href="${pageContext.request.contextPath}/download/1.png">下载1.png</a>
  <a href="${pageContext.request.contextPath}/download/图片.png">下载 图片.png</a>


  <%--文件上传--%>
  <hr>
  <form action="${pageContext.request.contextPath}/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"><br>
    <input type="submit" value="上传">
  </form>

后台前端控制界面：

package com.helong.web.controller;

import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpSession;
import java.io.*;
import java.net.URLEncoder;
import java.util.Map;

@Controller
public class MyController {
    //使用下面这种方式的时候就可以获取文件的后缀名了
    @RequestMapping("/download/{filename:.+}")
    public ResponseEntity download(@PathVariable String filename, HttpSession httpSession) throws Exception {
        System.out.println(filename);

        //1.获取文件的路径
        ServletContext servletContext = httpSession.getServletContext();
        String realPath = servletContext.getRealPath("/download/" + filename);

        //2.把文件读到程序里面
        InputStream io = new FileInputStream(realPath);
        byte[] body = new byte[io.available()];
        io.read(body);

        //3.创建响应头
        HttpHeaders httpHeaders = new HttpHeaders();
        /*解决中文文件名下载时不能显示文件名的问题*/
        filename = URLEncoder.encode(filename,"utf-8");

        /*告诉浏览器以辅件的形式进行下载*/
        httpHeaders.add("Content-Disposition","attachment;filename="+filename);

        ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(body, httpHeaders, HttpStatus.OK);

        return responseEntity;
    }

    //文件上传
    @RequestMapping("upload")
    public String upload(@RequestParam("file") CommonsMultipartFile file,HttpSession session) throws IOException {
        System.out.println(file.getContentType());/*文件类型*/
        System.out.println(file.getOriginalFilename());/*文件名称*/
        System.out.println(file.getSize());/*获取文件大小*/
        System.out.println(file.getName());/*获取文件对应的属性名称*/

        //确定文件上传的路径
        ServletContext servletContext = session.getServletContext();
        String realPath = servletContext.getRealPath("/upload");
        //变成程序当中的路径
        File uploadPath = new File(realPath);
        if(!uploadPath.exists()){
            //如果路径不存在，创建一个新文件夹
            uploadPath.mkdirs();
        }

        //确认最终的路径   /文件夹/文件名       工程的名称/upload/java.png
        String filename = file.getOriginalFilename();
        //将原来的路径重新复制
        uploadPath = new File(uploadPath + "/" + filename);

        //开始上传
        file.transferTo(uploadPath);

        return "result.jsp";
    }


}

3.多文件上传(使用WebUploader由百度提供)

1).将文件引入对应位置

2).在springmvc.xml文件中设置允许静态文件访问

<!--开启静态文件访问权限-->
<mvc:resources mapping="/js/**" location="/js/"/>
<mvc:resources mapping="/css/**" location="/css/"/>

3).前端的上传界面示例：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>WebUploader文件上传简单示例</title>
    <%--引入css样式--%>
    <link href="${pageContext.request.contextPath}/css/webuploader.css" rel="stylesheet" type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js" type="text/javascript"></script>
    <%--引入文件上传插件--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/webuploader.js"></script>
    <script type="text/javascript">
        $(function () {
            var $ = jQuery,
                $list = $('#fileList'),
                //优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,
                // 缩略图大小
                thumbnailWidth = 100 * ratio,
                thumbnailHeight = 100 * ratio,
                // Web Uploader实例uploader;
                // 初始化Web Uploader
                uploader = WebUploader.create({
                    // 自动上传。
                    auto: false,
                    // swf文件路径
                    swf: '${pageContext.request.contextPath}/js/Uploader.swf',
                    // 文件接收服务端。
                    server: '${pageContext.request.contextPath}/upload',
                    fileVal: 'file',
                    threads: '30',      //同时运行30个线程传输
                    fileNumLimit: '10',   //文件总数量只能选择10个 
                    // 选择文件的按钮。可选。
                    pick: {
                        id: '#filePicker',  //选择文件的按钮
                        multiple: true        //允许可以同时选择多个图片
                    },
                    //图片质量,只有type为`image/jpeg`的时候才有效。
                    quality: 100,
                    //限制传输文件类型，accept可以不写 (用于显示文件类型筛选)
                    /* accept: {
                    title: 'Images',//描述
                    extensions: 'gif,jpg,jpeg,bmp,png,zip',//类型
                    mimeTypes: 'image/*'//mime类型
                   } */
                });

            // 当有文件添加进来的时候，创建img显示缩略图使用
            uploader.on('fileQueued', function (file) {
                var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.append($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            // 文件上传过程中创建进度条实时显示。   
            // uploadProgress事件：上传过程中触发，携带上传进度。
            // file文件对象 percentage传输进度 Number类型
            uploader.on('uploadProgress', function (file, percentage) {
                console.log(percentage);
            });
            // 文件上传成功时候触发，给item添加成功class,
            // 用样式标记上传成功。
            // file：文件对象，   
            // response：服务器返回数据
            uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).addClass('upload-state-done');
                //console.info(response);
                $("#upInfo").html("<font color='red'>" + response._raw + "</font>");
            });
            // 文件上传失败
            // file:文件对象 ，
            // code：出错代码
            uploader.on('uploadError', function (file, code) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }
                $error.text('上传失败!');
            });

            // 不管成功或者失败，
            // 文件上传完成时触发。
            // file： 文件对象
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });
            //绑定提交事件
            $("#btn").click(function () {
                console.log("上传...");
                uploader.upload();   //执行手动提交
                console.log("上传成功");
            });
        });
    </script>
    <script>
        var contextpath = ${pageContext.request.contextPath};
    </script>
    <script type="text/javascript" src=""></script>

</head>
<body style="padding:10px">
<h3>多文件上传</h3>
    <!--dom结构部分-->
<div id="uploader-demo">
     <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="upInfo"></div>
    <div id="filePicker">选择文件</div>
</div>
<input type="button" id="btn" value="开始上传">

</body>
</html>

4).后台前端控制器的设置与单文件上传一致