Springboot 檔案上傳(帶進度條)

阿新 • • 發佈：2019-01-18

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

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="htt

atitit.文件上傳帶進度條的實現原理and組件選型and最佳實踐總結O7

private tps cto 協議 post sch 頁面 system osc atitit.文件上傳帶進度條的實現原理and組件選型and最佳實踐總結O7 1. 實現原理 1 2. 大的文件上傳原理::使用applet 1 3. 新的bp 2 1. 性能提升

springMvc多附件上傳帶進度條

html頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co

SpringMVC之檔案上傳（進度條顯示）

親測可用 1、mvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"

基於AJAX的檔案上傳顯示進度條實現

基於Ajax的檔案上傳要實現的功能要求，要在使用者提交了上傳按鈕請求後，客戶端其頁面要顯示檔案上傳進度條。其整個功能時序圖如圖所示。簡單的說，要實現在客戶端顯示進度條，需要做的是：當客戶端提交上傳檔案請求後，伺服器在上傳檔案

純H5 AJAX檔案上傳加進度條功能

上傳程式碼js部分 //包上傳 $('.up_apk').change(function () { var obj = $(this); var form_data = new FormData(); // 獲取檔案 var fi

檔案上傳含進度條（fileupload控制元件）

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">之前的專案一直沒有涉及到達的檔案上傳，所以沒有用到進度條，這幾天不忙，所

Bootstrap file-input 外掛使用(大檔案上傳顯示進度條)

Bootstrap file-input 是一個檔案上傳的外掛 ,使用之後會使檔案上傳變得特別簡單. 方法: 1.新增css和js支援 fileinput.min.css和fileinput.min.js是必須的,其他根據情況新增除了外掛需要的js

spring mvc檔案上傳實現進度條

檔案上傳應該大部分人都接觸過，一般都是基於commons-fileupload元件來實現，SpringMVC的檔案上傳功能也是在commons-fileupload元件提供的功能上面做了一些包裝功能，使檔案上傳開發更容易方便。看下上傳效果圖：

servlet3.0之ajax檔案上傳和進度條

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <h

使用jquery.form.js實現檔案上傳及進度條前端程式碼

1、背景 ajax的表單提交只能提交data資料到後臺，沒法實現file檔案的上傳還有展示進度功能，這裡用到form.js的外掛來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。 2、靜態頁搭建 html程式碼如下 <div clas

java struts2 多檔案上傳加進度條

摘要實現批量上傳，同時又進度顯示和上傳速度 1、struts.xml檔案配置 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN

java ajax 檔案上傳帶滾動條顯示

問題：實現檔案上傳並給出進度條顯示上傳過程資訊。如何實現上傳的功能 ------使用apache的FileUpload元件上傳檔案如何實現上傳檔案的監聽功能 ------使用ProgressListener監聽檔案狀態如何實現記錄上傳狀態的功能 ------使用ses

jQuery監聽檔案上傳實現進度條效果

給XMLHttpRequest物件的upload屬性繫結onprogress方法監聽上傳過程 var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){} 因為jQuery預設使用的

jquery 實現拖動文件上傳加進度條

進行 con pos rip file round 默認 dex toupper 通過對文件的拖動實現文件的上傳，主要用到的是HTML5的ondrop事件，上傳內容通道FormData傳輸： //進度條 <div class="parent-dlg" >

js 文件異步上傳顯示進度條顯示上傳速度預覽文件

response null acc 文件的 pen 實現 accept https 提交通常文件異步提交有幾個關鍵 1.支持拖拽放入文件。2.限制文件格式。3.預覽圖片文件。4.上傳進度，速度等，上傳途中取消上傳。5.數據與文件同時上傳現在開始筆記：需要一個最基礎的元

補習系列(11)-springboot 檔案上傳原理

目錄一、檔案上傳原理二、springboot 檔案機制臨時檔案定製配置三、示例程式碼 A. 單檔案上傳 B. 多檔案上傳 C. 檔案上傳異常 D. Bean 配置四、檔案下載小結一、檔

SpringBoot學習筆記(8)-----SpringBoot檔案上傳

直接上程式碼，上傳檔案的前端頁面： <body> <form action="/index/upload" enctype="multipart/form-data" method="post"> <input type="file" name

SpringBoot 檔案上傳臨時檔案路徑問題

https://www.cnblogs.com/canmeng-cn/p/8473225.html ****************************************************** 年後放假回來，一向執行OK的專案突然圖片上傳不了了，後臺報錯日誌如下： jav

thymeleaf + easy + springboot 檔案上傳下載，以及列表展示介面

這裡只是隨便寫寫，如果有大佬看到請不要噴我。上傳下載在上一篇部落格裡面有寫到我就不在描述了，這裡我只是寫一下我的思路。首先可以讓程式碼可以複用起來這裡用到的是 thymeleaf的include標籤。檔案列表 <!-- 這裡是檔案列表只需要放在需要顯示檔案

Springboot 檔案上傳(帶進度條)

相關推薦