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 .x

spring.servlet.multipart.maxFileSize=300MB

spring.servlet.multipart.maxRequestSize=300MB

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

Springboot 文件上传(带进度条)的更多相关文章

  1. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  2. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  3. Struts2文件上传带进度条，虽然不是很完美

    好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...

  4. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  5. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  6. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  7. php实现大文件上传带进度条

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  8. struts2多文件上传(带进度条)demo+说明

    利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...

  9. html5 文件上传 带进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 外卖ERP管理系统(一)

    京门时代外卖ERP是北京京门时代科技有限公司旗下一款专业的外卖ERP系统管理软件. 本ERP目前己经对接了百度.饿了么.美团以等各外卖平台,在配送方面对接了闪送快递.人人快递.UU跑腿以及达达配送. ...

  2. Win 10 System Restore Fail 0x80070091

    Question: Below about says it all.  I tried SysRes from two points, both with same failure. System R ...

  3. rvs产生服从指定分布的随机数 pdf概率密度函数 cdf累计分布函数 ppf 分位点函数

    统计工作中几个常用用法在python统计函数库scipy.stats的使用范例. 正态分布以正态分布的常见需求为例了解scipy.stats的基本使用方法. 1.生成服从指定分布的随机数 norm.r ...

  4. caffe编译时候出现 undefined reference to `TIFFReadRGBAStrip@LIBTIFF_4.0'

    1.编译时候出现 make: * [.build_release/examples/siamese/convert_mnist_siamese_data.bin] Error 1 /usr/local ...

  5. VUE温习：style层次分析

    一.vue样式style层次分析 1.样式可以在main.js.模块js文件.组件style.组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系. 2.总结: (1) ...

  6. 上海线下技术交流（AA制）

    标签: 上海线下技术交流会 作者:王清培(Plen wang) 沪江Java资深架构师 .营销云平台负责人 上海地区技术线下交流,本次聚会AA制,要的就是热爱技术,交流技术,不是凑热闹.特此留念. 活 ...

  7. JavaScript单独的模块中传递数据

    首先我们来看看这张图,让我们来思考一下! 下买我给出我的完整思路代码 html代码: <!DOCTYPE html> <html lang="zh-CN"> ...

  8. go微服务框架go-micro深度学习(五) stream 调用过程详解

        上一篇写了一下rpc调用过程的实现方式,简单来说就是服务端把实现了接口的结构体对象进行反射,抽取方法,签名,保存,客户端调用的时候go-micro封请求数据,服务端接收到请求时,找到需要调用调 ...

  9. Jenkins安装卸载

    下载安装去Jenkins官网下载Jenkins,Centos的话会下载到.rpm安装文件 安装.rpm文件使用命令rpm -ivh **.rpm 安装完成之后使用命令rpm -qc jenkins查看 ...

  10. 腾讯云服务器web环境配置过程

    我买的服务器是: 可用区:香港二区 实例类型:标准型S2 操作系统:CentOS 6.5 64位 自己的电脑是 win10 ------------以上是背景------------------ 1 ...