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. 我的Java书单之优秀的入门书

    我始终相信,学习任何一门新技术,该技术相关的优秀书籍总是最好的资料.当然了,优秀的视频教程能帮组你快速地了解该技术,但是要深入和系统地去学习该技术,好的书籍就显得尤为重要了.结合我自己学习java的经 ...

  2. CLR via C#(02)-基元类型、引用类型、值类型

    http://www.cnblogs.com/qq0827/p/3281150.html 一. 基元类型 编译器能够直接支持的数据类型叫做基元类型.例如int, string等.基元类型和.NET框架 ...

  3. C语言---翻译过程

    c的实现中包括两种环境: 1.翻译环境(translation environment):源程序---->机器指令 2.执行环境(execution environment):执行机器指令 这两 ...

  4. easyui-layout中的收缩层无法显示标题问题解决

    先看问题描述效果图片: 如上,我的查询条件是放在layout下面的一个可收缩层中,初始是收缩的,title显示不出来的话对使用者很不方便,代码如下: <div id="__MODULE ...

  5. meta常用标签总结

    meta元素共有三个可选属性(http-equiv.name和scheme)和一个必选属性(content),content定义与 http-equiv 或 name 属性相关的元信息 可选属性 属性 ...

  6. VMware Mac OS中无法找到适应的分辨率的解决办法

    使用VMware安装的Mac OS中,有时在显示器的分辨率中的选择项里面,没有对应显示的分辨率可供选择的时候(无法自适应),可以在虚拟机设置里,显示器中修改强制分辨率.修改过后重启虚拟机,就可以有对应 ...

  7. 设计模式(3)--SimpleFactory( [1] 简单工厂模式)--创建型

    1.模式定义: 简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例. 2.模式特点: 实现方式的 ...

  8. Qt---自定义界面之 Style Sheet

    这次讲Qt Style Sheet(QSS),QSS是一种与CSS类似的语言,实际上这两者几乎完全一样.既然谈到CSS我们就有必要说一下盒模型. 1. 盒模型(The Box Model) 在样式中, ...

  9. 【安富莱原创开源应用第2期】基于RL-USB和RL-FlashFS的完整NAND解决方案,稳定好用,可放心用于产品批量

    说明:0. NAND Flash这块经常有人咨询,这里发布一个完整的解决方案,支持擦写均衡,坏块管理,ECC和掉电保护.        早期的时候我们是用的自己做的NAND算法,支持滑块管理,擦写均衡 ...

  10. Python数据类型之字符串

    一:概述 Python中的字符串的一些概念 可以看作是字符的集合,在数据类型里没有单个字符的数据类型,可以用单个字符表示的一个字符串数据类型 字符串是一种不可变的序列类型,单个字符从左到右按照顺序排列 ...