@@ -28,6 +28,11 @@ | |||||
<artifactId>spring-boot-starter-web</artifactId> | <artifactId>spring-boot-starter-web</artifactId> | ||||
</dependency> | </dependency> | ||||
<dependency> | |||||
<groupId>org.springframework.boot</groupId> | |||||
<artifactId>spring-boot-starter-thymeleaf</artifactId> | |||||
</dependency> | |||||
<dependency> | <dependency> | ||||
<groupId>org.springframework.boot</groupId> | <groupId>org.springframework.boot</groupId> | ||||
<artifactId>spring-boot-starter-test</artifactId> | <artifactId>spring-boot-starter-test</artifactId> | ||||
@@ -3,10 +3,23 @@ package com.xkcoding.springbootdemoupload; | |||||
import org.springframework.boot.SpringApplication; | import org.springframework.boot.SpringApplication; | ||||
import org.springframework.boot.autoconfigure.SpringBootApplication; | import org.springframework.boot.autoconfigure.SpringBootApplication; | ||||
/** | |||||
* <p> | |||||
* 启动类 | |||||
* </p> | |||||
* | |||||
* @package: com.xkcoding.springbootdemoupload | |||||
* @description: 启动类 | |||||
* @author: shenyangkai | |||||
* @date: Created in 2018/10/20 21:23 | |||||
* @copyright: Copyright (c) 2018 | |||||
* @version: V1.0 | |||||
* @modified: shenyangkai | |||||
*/ | |||||
@SpringBootApplication | @SpringBootApplication | ||||
public class SpringBootDemoUploadApplication { | public class SpringBootDemoUploadApplication { | ||||
public static void main(String[] args) { | |||||
SpringApplication.run(SpringBootDemoUploadApplication.class, args); | |||||
} | |||||
public static void main(String[] args) { | |||||
SpringApplication.run(SpringBootDemoUploadApplication.class, args); | |||||
} | |||||
} | } |
@@ -0,0 +1,25 @@ | |||||
package com.xkcoding.springbootdemoupload.controller; | |||||
import org.springframework.stereotype.Controller; | |||||
import org.springframework.web.bind.annotation.GetMapping; | |||||
/** | |||||
* <p> | |||||
* 首页Controller | |||||
* </p> | |||||
* | |||||
* @package: com.xkcoding.springbootdemoupload.controller | |||||
* @description: 首页Controller | |||||
* @author: shenyangkai | |||||
* @date: Created in 2018/10/20 21:22 | |||||
* @copyright: Copyright (c) 2018 | |||||
* @version: V1.0 | |||||
* @modified: shenyangkai | |||||
*/ | |||||
@Controller | |||||
public class IndexController { | |||||
@GetMapping("") | |||||
public String index() { | |||||
return "index"; | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
server: | |||||
port: 8080 | |||||
servlet: | |||||
context-path: /demo |
@@ -0,0 +1,25 @@ | |||||
目录说明 | |||||
======================== | |||||
```bash | |||||
├── Uploader.swf # SWF文件,当使用Flash运行时需要引入。 | |||||
├ | |||||
├── webuploader.js # 完全版本。 | |||||
├── webuploader.min.js # min版本 | |||||
├ | |||||
├── webuploader.flashonly.js # 只有Flash实现的版本。 | |||||
├── webuploader.flashonly.min.js # min版本 | |||||
├ | |||||
├── webuploader.html5only.js # 只有Html5实现的版本。 | |||||
├── webuploader.html5only.min.js # min版本 | |||||
├ | |||||
├── webuploader.noimage.js # 去除图片处理的版本,包括HTML5和FLASH. | |||||
├── webuploader.noimage.min.js # min版本 | |||||
├ | |||||
├── webuploader.custom.js # 自定义打包方案,请查看 Gruntfile.js,满足移动端使用。 | |||||
└── webuploader.custom.min.js # min版本 | |||||
``` | |||||
## 示例 | |||||
请把整个 Git 包下载下来放在 php 服务器下,因为默认提供的文件接受是用 php 编写的,打开 examples 页面便能查看示例效果。 |
@@ -0,0 +1,28 @@ | |||||
.webuploader-container { | |||||
position: relative; | |||||
} | |||||
.webuploader-element-invisible { | |||||
position: absolute !important; | |||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ | |||||
clip: rect(1px,1px,1px,1px); | |||||
} | |||||
.webuploader-pick { | |||||
position: relative; | |||||
display: inline-block; | |||||
cursor: pointer; | |||||
background: #00b7ee; | |||||
padding: 10px 15px; | |||||
color: #fff; | |||||
text-align: center; | |||||
border-radius: 3px; | |||||
overflow: hidden; | |||||
} | |||||
.webuploader-pick-hover { | |||||
background: #00a2d4; | |||||
} | |||||
.webuploader-pick-disable { | |||||
opacity: 0.6; | |||||
pointer-events:none; | |||||
} | |||||
@@ -0,0 +1,81 @@ | |||||
<!doctype html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<meta name="viewport" | |||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||||
<title>spring-boot-demo-upload</title> | |||||
<link href="webuploader-0.1.5/webuploader.css" rel="stylesheet"> | |||||
<script src="jquery/jquery-3.3.1.min.js"></script> | |||||
<script src="webuploader-0.1.5/webuploader.js"></script> | |||||
</head> | |||||
<body> | |||||
<div id="uploader" class="wu-example"> | |||||
<!--用来存放文件信息--> | |||||
<div id="thelist" class="uploader-list"></div> | |||||
<div class="btns"> | |||||
<div id="picker">选择文件</div> | |||||
<button id="ctlBtn" class="btn btn-default">开始上传</button> | |||||
</div> | |||||
</div> | |||||
<script> | |||||
var uploader = WebUploader.create({ | |||||
// swf文件路径 | |||||
swf: 'webuploader-0.1.5/Uploader.swf', | |||||
// 文件接收服务端。 | |||||
server: 'http://webuploader.duapp.com/server/fileupload.php', | |||||
// 选择文件的按钮。可选。 | |||||
// 内部根据当前运行是创建,可能是input元素,也可能是flash. | |||||
pick: '#picker', | |||||
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! | |||||
resize: false | |||||
}); | |||||
// 当有文件被添加进队列的时候 | |||||
var $list = $("#thelist"); | |||||
uploader.on('fileQueued', function (file) { | |||||
$list.append('<div id="' + file.id + '" class="item">' + | |||||
'<h4 class="info">' + file.name + '</h4>' + | |||||
'<p class="state">等待上传...</p>' + | |||||
'</div>'); | |||||
}); | |||||
// 文件上传过程中创建进度条实时显示。 | |||||
uploader.on( 'uploadProgress', function( file, percentage ) { | |||||
var $li = $( '#'+file.id ), | |||||
$percent = $li.find('.progress .progress-bar'); | |||||
// 避免重复创建 | |||||
if ( !$percent.length ) { | |||||
$percent = $('<div class="progress progress-striped active">' + | |||||
'<div class="progress-bar" role="progressbar" style="width: 0%">' + | |||||
'</div>' + | |||||
'</div>').appendTo( $li ).find('.progress-bar'); | |||||
} | |||||
$li.find('p.state').text('上传中'); | |||||
$percent.css( 'width', percentage * 100 + '%' ); | |||||
}); | |||||
uploader.on( 'uploadSuccess', function( file ) { | |||||
$( '#'+file.id ).find('p.state').text('已上传'); | |||||
}); | |||||
uploader.on( 'uploadError', function( file ) { | |||||
$( '#'+file.id ).find('p.state').text('上传出错'); | |||||
}); | |||||
uploader.on( 'uploadComplete', function( file ) { | |||||
$( '#'+file.id ).find('.progress').fadeOut(); | |||||
}); | |||||
</script> | |||||
</body> | |||||
</html> |