文件上傳下載篇(前端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="上傳" onclick="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="下載" onclick="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();
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章