• A+

Springboot 文件上传(带进度条)

1. 相关依赖 pom.xml

复制代码
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.4.RELEASE</version>
    </parent>
    <groupId>io.gitee.liubin0509</groupId>
    <artifactId>study</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <dependency>
            <groupId>dom4j</groupId>
            <artifactId>dom4j</artifactId>
        </dependency>
    </dependencies>
</project>
复制代码

2. 画面 upload.ftl

复制代码
<!DOCTYPE html>
<html>
<head>
<script src="./js/jquery.min.js"></script>
</head>
<body>
    <h1>Spring Boot file upload example</h1>
    <form id="FileuploadForm" method="POST" action="/upload" enctype="multipart/form-data">
        <input type="file" name="uploadFile" id="uploadFile"/><br />
        <br /> <input type="button" value="上传文件" onclick="upload()" />
        <div id="msg"></div>
    </form>
    <!--进度条部分(默认隐藏)--> 
    <div style="display: none;" class="progress-body"> 
        <div>
            <span style="width: 100px; display: inline-block; text-align: right">上传进度:</span>
            <progress></progress><percentage>0%</percentage>
        </div> 
        <div>
            <span style="width: 100px; display: inline-block; text-align: right">上传速度:</span>
            <span style="margin-bottom: 10px; margin-left: 30px; width: 300px;" class="progress-speed">0 M/S, 0/0M</span>
        </div>
        <div>
            <span style="width: 100px; display: inline-block; text-align: right">上传状态:</span>
            <span style="margin-bottom: 10px; margin-left: 30px; width: 300px;" class="progress-info">请选择文件并点击上传文件按钮</span>
        </div>
    </div>
</body>
</html>
复制代码

3, 上传ajax

复制代码
<script>
    // 上传文件
    function upload(){
       $("#msg").text("");
       var checkFile = $("#uploadFile").val();
        var msgInfo = "";
       if(null==checkFile || ""==checkFile){
           $("#msg").text("文件为空,请选择文件!");
       }else{
            var formData = new FormData(document.getElementById("FileuploadForm"));
            $.ajax({
                       type: "POST",
                       enctype:'multipart/form-data',
                       url: '/upload',
                       data: formData,
                       cache:false,
                       processData:false,
                       contentType:false,
                       error:function(result){
                           console.log("error");
                           console.log(result);
                               flag = false;
                               $("#msg").text("访问服务器错误,请重试!");
                       },
                       success: function(result){
                            console.log("success");
                       },
                       xhr: function () { 
                           var xhr = $.ajaxSettings.xhr(); 
                           if (xhr.upload) { 
                               //处理进度条的事件
                                xhr.upload.addEventListener("progress", progressHandle, false); 
                                //加载完成的事件 
                                xhr.addEventListener("load", completeHandle, false); 
                                //加载出错的事件 
                                xhr.addEventListener("error", failedHandle, false); 
                                //加载取消的事件 
                                xhr.addEventListener("abort", canceledHandle, false);
                                //开始显示进度条 
                                showProgress(); 
                                return xhr; 
                             }
                         }
                       }, 'json');
        }
    }
    var start = 0;
    //显示进度条的函数 
    function showProgress() {
        start = new Date().getTime(); 
        $(".progress-body").css("display", "block"); 
    } 
    //隐藏进度条的函数 
    function hideProgress() {
        $("#uploadFile").val('');
        $('.progress-body .progress-speed').html("0 M/S, 0/0M"); 
        $('.progress-body percentage').html("0%");
        $('.progress-body .progress-info').html("请选择文件并点击上传文件按钮"); 
        //$(".progress-body").css("display", "none"); 
    } 
    //进度条更新 
    function progressHandle(e) { 
        $('.progress-body progress').attr({value: e.loaded, max: e.total}); 
        var percent = e.loaded / e.total * 100; 
        var time = ((new Date().getTime() - start) / 1000).toFixed(3);
        if(time == 0){
            time = 1;
        }
        $('.progress-body .progress-speed').html(((e.loaded / 1024) / 1024 / time).toFixed(2) + "M/S, " + ((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + " MB. ");
        $('.progress-body percentage').html(percent.toFixed(2) + "%");
        if (percent == 100) { 
            $('.progress-body .progress-info').html("上传完成,后台正在处理..."); 
        } else { 
            $('.progress-body .progress-info').html("文件上传中..."); 
        } 
    }; 
    //上传完成处理函数 
    function completeHandle(e) { 
        $('.progress-body .progress-info').html("上传文件完成。"); 
        setTimeout(hideProgress, 2000); 
    }; 
    //上传出错处理函数 
    function failedHandle(e) { 
        $('.progress-body .progress-info').html("上传文件出错, 服务不可用或文件过大。"); 
    }; 
    //上传取消处理函数 
    function canceledHandle(e) { 
        $('.progress-body .progress-info').html("上传文件取消。"); 
    };
    </script>
复制代码

4. css

复制代码
<style type="text/css">
progress {
    background-color: #56BE64;
} 
progress::-webkit-progress-bar {
    background: #ccc;
} 
progress::-webkit-progress-value {
    background: #56BE64;
}
percentage{
    position: fixed;
    left: 160px;
}
</style>
复制代码

5. controller

复制代码
package io.gitee.liubin0509.study.web.ctrl;

import java.io.File;
import java.io.IOException;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import io.gitee.liubin0509.study.web.bean.InfoMsg;

@Controller
@RequestMapping("/upload")
public class UploadCtrl {
    private static final String TMP_PATH = "e:/projects/tmp";

    @RequestMapping(value = "", method = RequestMethod.GET)
    public String fileUploadInit() {
        // InfoMsg infoMsg = new InfoMsg();

        return "upload";
    }

    @RequestMapping(value = "", method = RequestMethod.POST)
    @ResponseBody
    public InfoMsg fileUpload(@RequestParam("uploadFile") MultipartFile file) {
        InfoMsg infoMsg = new InfoMsg();
        if (file.isEmpty()) {
            infoMsg.setCode("error");
            infoMsg.setMsg("Please select a file to upload");
            return infoMsg;
        }

        try {
            File tmp = new File(TMP_PATH, file.getOriginalFilename());
            if(!tmp.getParentFile().exists()){
                tmp.getParentFile().mkdirs();
            }
            file.transferTo(tmp);

            infoMsg.setCode("success");
            infoMsg.setMsg("You successfully uploaded '" + file.getOriginalFilename() + "'");

        } catch (IOException e) {
            infoMsg.setCode("error");
            infoMsg.setMsg("Uploaded file failed");
        }

        return infoMsg;
    }
}
复制代码

6. springboot 配置

pom文件中引用 不同版本的springboot,上传文件大小配置不一样

复制代码
#spring.resources.static-locations=classpath:/static/
spring.freemarker.template-loader-path=classpath:/static/

# for SpringBoot 1.3.x or earlier
multipart.maxFileSize=300MB
multipart.maxRequestSize=300MB

# Spring Boot 1.4.x and 1.5.x
spring.http.multipart.maxFileSize=300MB
spring.http.multipart.maxRequestSize=300MB

#Spring Boot 2.x
spring.servlet.multipart.maxFileSize=300MB
spring.servlet.multipart.maxRequestSize=300MB
复制代码

 源码下载地址: https://gitee.com/liubin0509/spring-uploadfile

 

所属分类:后台

全部评论: 0

    我有话说:
    ×