🍱 Adding upload assets.

6 years ago · 8b21014266
--- a/spring-boot-demo-upload/pom.xml
+++ b/spring-boot-demo-upload/pom.xml
@@ -28,6 +28,11 @@
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
--- a/spring-boot-demo-upload/src/main/java/com/xkcoding/springbootdemoupload/SpringBootDemoUploadApplication.java
+++ b/spring-boot-demo-upload/src/main/java/com/xkcoding/springbootdemoupload/SpringBootDemoUploadApplication.java
@@ -3,10 +3,23 @@ package com.xkcoding.springbootdemoupload;
 import org.springframework.boot.SpringApplication;
 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
 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);
    }
 }
--- a/spring-boot-demo-upload/src/main/java/com/xkcoding/springbootdemoupload/controller/IndexController.java
+++ b/spring-boot-demo-upload/src/main/java/com/xkcoding/springbootdemoupload/controller/IndexController.java
@@ -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";
    }
 }
--- a/spring-boot-demo-upload/src/main/resources/application.yml
+++ b/spring-boot-demo-upload/src/main/resources/application.yml
@@ -0,0 +1,4 @@
 server:
  port: 8080
  servlet:
    context-path: /demo
--- a/spring-boot-demo-upload/src/main/resources/static/jquery/jquery-3.3.1.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/jquery/jquery-3.3.1.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/README.md
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/README.md
@@ -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 页面便能查看示例效果。
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/Uploader.swf
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/Uploader.swf
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.css
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.css
@@ -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;
 }

--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.custom.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.custom.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.custom.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.custom.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.fis.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.fis.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.flashonly.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.flashonly.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.flashonly.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.flashonly.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.html5only.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.html5only.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.html5only.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.html5only.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.noimage.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.noimage.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.noimage.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.noimage.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.nolog.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.nolog.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.nolog.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.nolog.min.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.withoutimage.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.withoutimage.js
--- a/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.withoutimage.min.js
+++ b/spring-boot-demo-upload/src/main/resources/static/webuploader-0.1.5/webuploader.withoutimage.min.js
--- a/spring-boot-demo-upload/src/main/resources/templates/index.html
+++ b/spring-boot-demo-upload/src/main/resources/templates/index.html
@@ -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>