文件上传下载篇(前端JSP,后端SSM),注解多多,简单明了!复制就能用!

Echarts之柱状图动态加载数据篇

阿里EasyExcel导入导出Excel表格篇

老规矩,先上效果:

依赖:

<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.xml:

<bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--文件大小-->
        <property name="maxUploadSize" value="10240000"/>
        <!--默认编码-->
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

web.xml:

<!--过滤器Spring编码-->
    <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>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
</filter-mapping>

前台代码:(细品前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">

        function filename() {
            var file = $("#file").val();
            var parame = encodeURI(file);
            alert(parame)
            $.ajax({
                type: 'POST',
                dataType: 'text',
                url: '${pageContext.request.contextPath}/file/filename?filename=' + parame,
            });
        }

        function downname(e) {
            var id = $(e).attr("id");
            var parame = encodeURI(id);
            alert(id);
            window.location.href = "${pageContext.request.contextPath}/file/down?downname=" + parame;
        }
    </script>
</head>
<body>
<h2>文件上传下载测试页面</h2>
<%--上传--%>
<form action="/file/upload" method="post" enctype="multipart/form-data">
    选择文件:<input id="file" type="file" name="file" width="120px">
    <input type="submit" value="上传" οnclick="filename()">
</form>
<%--下载--%>
<form action="/file/down" method="GET" id="downnameform">
    <c:forEach items="${file}" var="filename">
        <a>${filename}</a>
        <input id="${filename}" class="namelist" type="button" value="下载" οnclick="downname(this)">
        <p><%--换行用--%></p>
    </c:forEach>
</form>
<hr>
</body>
</html>


Controller:(细品后端代码

/**
    * 跳转文件上传下载页面
    */
    //获取当此上传文件名
    String fileName = null;
    //存储每一次上传的文件名
    List<Object> allfilename = new ArrayList<>();

    @RequestMapping("/file/FilePage")
    public String FilePage(HttpServletRequest request){

        HttpSession session = request.getSession();
        session.setAttribute("file",allfilename);
        return "FilePage";
    }

    /**
     * 文件上传功能
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping(value="/file/upload",method=RequestMethod.POST)
    @ResponseBody
    public String upload(MultipartFile file) throws IOException {
        //得到上传文件名
        fileName = file.getOriginalFilename();
        //存储每一次上传的文件名
        allfilename.add(fileName);
        //文件上传地址
        String path = "F:\\file";
        //创建文件流
        File dir = new File(path,fileName);
        //如果父目录不存在,连同父目录一起创建。
        if(!dir.exists()){
            dir.mkdirs();
        }
        //MultipartFile自带的解析方法
        file.transferTo(dir);
        return "ok!";
    }

    /**
     * 文件下载功能
     * @param response
     * @throws IOException
     */
    @RequestMapping(method =RequestMethod.GET ,value = "/file/down")
    public void down(HttpServletResponse response,String downname) throws IOException {
        //文件路径
        String path = "F:\\file\\"+downname;
        //获取输入流
        InputStream bis = new BufferedInputStream(new FileInputStream(new File(path)));
        //转码,免得文件名中文乱码
        path = URLEncoder.encode(path,"UTF-8");
        //设置文件下载头
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(downname,"UTF-8"));
        //设置文件ContentType类型,这样设置,会自动判断下载文件类型
        response.setContentType("multipart/form-data");
        // 创建输出流
        BufferedOutputStream out = new BufferedOutputStream(response.getOutputStream());
        int len = 0;
        //循环将输入流中的内容读取到缓冲区当中
        while((len = bis.read()) != -1){
            out.write(len);
            out.flush();
        }
        // 关闭输出流
        out.close();
    }
发布了17 篇原创文章 · 获赞 13 · 访问量 1138

猜你喜欢

转载自blog.csdn.net/Tianc666/article/details/104581182