环境介绍

前端框架：Kendo UI
后台框架：Spring Boot + Hibernate
开发工具：IntelliJ IDEA

前端

Web页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>up.view.common.attachment</title>
    <script type="text/javascript" src="/assets/jquery.min.js"></script>
    <link href="/assets/styles/kendo.common.min.css" rel="stylesheet">
    <link href="/assets/styles/kendo.default.min.css" rel="stylesheet">
    <link href="/assets/styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="/assets/kendo.all.min.js"></script>
    <script>
        $(document).ready(function () {
            if (sessionStorage.initialFiles === undefined) {
                sessionStorage.initialFiles = "[]";
            }

            var initialFiles = JSON.parse(sessionStorage.initialFiles);

            $("#files").kendoUpload({
                multiple: true,
                async: {
                    saveUrl: "http://127.0.0.1:9090/api/pic/upload",
                    removeUrl: "http://127.0.0.1:9090/api/pic/remove",
                    autoUpload: true
                },
                validation: {
                    maxFileSize: 4194304
                },
                files: initialFiles,
                success: onSuccess
            });

            function onSuccess(e) {
                var currentInitialFiles = JSON.parse(sessionStorage.initialFiles);
                for (var i = 0; i < e.files.length; i++) {
                    var current = {
                        name: e.files[i].name,
                        extension: e.files[i].extension,
                        size: e.files[i].size
                    }

                    if (e.operation == "upload") {
                        currentInitialFiles.push(current);
                    } else {
                        var indexOfFile = currentInitialFiles.indexOf(current);
                        currentInitialFiles.splice(indexOfFile, 1);
                    }
                }
                sessionStorage.initialFiles = JSON.stringify(currentInitialFiles);
            }
        });
    </script>
    <style>
        .box h4, .demo-section h4 {
            margin-bottom: 1em;
            font-size: 16px;
            line-height: 1em;
            font-weight: bold;
            text-transform: uppercase;
        }

        .demo-section
        {
            margin: 0 auto 4.5em;
            padding: 3em;
            border: 1px solid rgba(20,53,80,0.14);
        }

        .demo-hint
        {
            line-height: 22px;
            color: #aaa;
            font-style: italic;
            font-size: .9em;
            padding-top: 1em;
        }
    </style>
</head>
<body>
<div id="attachments_upload">
    <div class="box">
        <h4>附件上传</h4>
    </div>
    <div>
        <div class="demo-section k-content">
            <input name="files" id="files" type="file" />
            <div class="demo-hint">附件大小的上限为 <strong>4MB</strong>.</div>
        </div>
    </div>


</div>
</body>
</html>

附截图

image.png

后台

Controller代码如下：

package TestinStack.UnityPlatform.ctl;

import TestinStack.Core.models.UP.Attachment;
import TestinStack.Core.models.ext.ActionResult;
import TestinStack.Core.utils.ApplicationContextUtils;
import TestinStack.UnityPlatform.dao.AttachmentDao;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * Created By Yangzc 2018-03-26
 * 上传附件
 */
@Controller("TestinStack.up.upload.ctl")
@RequestMapping("api/pic/")
public class UploadCtl {

    private AttachmentDao getAttachmentDao(){
        return ApplicationContextUtils.instance.getBeanInSrv("TestinStack.up.attachment.rep");
    }

    @Value("${image.server.url}")
    private String IMAGE_SERVER_URL;

    @Value("${image.upload.path}")
    private String IMAGE_UPLOAD_PATH;

    @PostMapping("upload")
    @ResponseBody
    @Transactional
    public synchronized ActionResult fileUpload(@RequestParam("files") MultipartFile file) {
        ActionResult result = new ActionResult();
        if (file.isEmpty()) {
            return new ActionResult(false, "Please select a file to upload");
        }

        try {
            // Get the file and save it somewhere
            byte[] bytes = file.getBytes();
            String fileRealName = file.getOriginalFilename();
            String ext = fileRealName.substring(fileRealName.indexOf("."));
            String fileNewName = UUID.randomUUID() + ext;
            Path path = Paths.get(IMAGE_UPLOAD_PATH + fileNewName);
            Files.write(path, bytes);
            String url = IMAGE_SERVER_URL + fileNewName;
            //响应上传图片的url
            Map map = new HashMap<>();
            map.put("error", 0);
            map.put("url", url);
            result.setContent(map);
            Attachment attachment = new Attachment();
            attachment.setAtName(file.getOriginalFilename());
            attachment.setAtFilePath(url);
            getAttachmentDao().save(attachment);
            return result;
            //return null;
        } catch (Exception e) {
            e.printStackTrace();
            return new ActionResult(false, "file upload failed.");
        }

    }

    @PostMapping("remove")
    @ResponseBody
    public ActionResult fileUpload(@RequestParam("fileNames") String fileName) {
            return new ActionResult(true, fileName + "has been deleted successfully.");
    }

}

附截图