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

spring.servlet.multipart.maxFileSize=300MB

spring.servlet.multipart.maxRequestSize=300MB

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

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

atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
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 ...
Struts2文件上传带进度条，虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...
springMVC+ajax 文件上传带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
Flex4/Flash多文件上传(带进度条)实例分享
要求必备知识本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上演示地址演 ...
HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
php实现大文件上传带进度条
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
struts2多文件上传(带进度条)demo+说明
利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...
html5 文件上传带进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

Vue（十二）vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
【并查集】Connectivity @ABC049&ARC065/upcexam6492
Connectivity 时间限制: 1 Sec 内存限制: 128 MB 题目描述 There are N cities. There are also K roads and L railway ...
【小y设计】二维码条形码打印编辑器
条码打印,价格标签打印,需要对打印进行排版,于是设计了一个简单的编辑器支持条码二维码打印进行编辑排版,支持文字.图片.条码.二维码.直线,能自由拖拉,删除,并可保存为模版. 界面如下 (下载Demo ...
Java知识回顾（9）同步、异步IO
一.基本概念同步和异步: 同步和异步是针对应用程序和内核的交互而言的. 同步指的是用户进程触发IO 操作并等待或者轮询的去查看IO 操作是否就绪: 而异步是指用户进程触发IO 操作以后便开始做自己的 ...
JavaScript JSON对象（一）
一.JSON数据 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换格式. JSON是“名值对”的集合.结构由大括号'{}',中括号 ...
iOS：Gif动画功能（显示gif动画、获取gif动画时长、获取gif动画执行次数）
一.简单介绍 gif动画是iOS开发中很常用的一个功能,有的是为了显示加载视频的过程,更多的是为了显示一个结果状态(动画更直观). 那么如何执行gif动画,方法有很多.(这里只写一下方法三,前两种之前 ...
简单了解weblogic配置文件
WebLogic的启动是通过启动文件来完成的包括启动管理服务器(startWebLogic) 启动被管服务器(startManagedWebLogic) 设置域环境(setDomainEnv) 关闭 ...
python3 cookie
最近再次学习python,本来就是一个菜鸟,我按照 Python CGI编程发现读cookie 读取不了,后来发现它这种写的方式也不怎么靠谱. Python中Cookie模块(python3中为ht ...
mysql YEARWEEK(date[,mode]) 函数查询上周数据以及本周数据
通常使用下边sql即可(如果数据库设置了周一为一周起始的话): 查询上周数据(addtime为datetime格式) SELECT id,addtime FROM mall_order WHERE ...
CentOS 7 安装 Oracle 11.2.0.4
一.安装环境 CentOS Linux release 7.2.1511 (Core) Oracle Database 11g Release 2 (11.2.0.4) 二.安装前准备 2.1 修改主 ...

Springboot 文件上传(带进度条)

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

随机推荐

热门专题