Spring Boot の bootstrap fileupload 可拖拽多文件上传

最新推荐文章于 2023-03-13 14:49:16 发布

ApacheCrazyFan

最新推荐文章于 2023-03-13 14:49:16 发布

阅读量3k

点赞数

分类专栏： bootstrap 前端文件上传

本文链接：https://blog.csdn.net/ApatheCrazyFan/article/details/79961875

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

bootstrap

2 篇文章 0 订阅

订阅专栏

文件上传

1 篇文章 0 订阅

订阅专栏

1、创建一个springboot的gradle项目

具体步骤不写，下面是一些基本依赖与配置:

1.1 build.gradle

buildscript {
	ext {
		springBootVersion = '2.0.0.RELEASE'
	}
	repositories {
		mavenCentral()
	}
	dependencies {
		classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
	}
}

apply plugin: 'java'
apply plugin: 'eclipse-wtp'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
apply plugin: 'war'

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
targetCompatibility = 1.8


repositories {
	mavenCentral()
}

dependencies {
	compile('org.springframework.boot:spring-boot-starter-thymeleaf')
	compile('org.springframework.boot:spring-boot-starter-web')
	compile('org.mybatis.spring.boot:mybatis-spring-boot-starter:1.3.2')
	compile('com.alibaba:druid:1.1.9')
	compile('javax.servlet:javax.servlet-api:4.0.0')
	runtime('mysql:mysql-connector-java')
	compile('org.springframework.boot:spring-boot-starter-tomcat')
	compile('org.springframework.boot:spring-boot-devtools')

	testCompile('org.springframework.boot:spring-boot-starter-test')
}

1.2 application.properties

ip以*表示

server.address=*.*.*.*
server.port=8080
server.servlet.path=/myspecial

#thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

#fileinput
#文件上传大小
# 可上传单个文件大小
# 可上传总文件大小
spring.servlet.multipart.maxFilesize=2Mb
spring.servlet.multipart.maxRequestSize=20Mb

1.3 编写fileupload文件上传页面

1.3.1 去项目github上下载源码。

https://github.com/kartik-v/bootstrap-fileinput/

将下载的项目解压，并将里面的js和css文件加入到自己项目的适当位置：

页面路径如下：

1.3.2 编写页面

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="zh_CN"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<link>
    <title>上传</title>
    <base href="/myspecial/"/>
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="static/custom/fileupload/css/fileinput.min.css"/>
    <!-- <link rel="stylesheet" href="static/custom/fileupload/themes/explorer-fa/theme.min.css"/> -->

    <script type="text/javascript" src="static/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="static/custom/fileupload/js/fileinput.min.js"></script>
    <script type="text/javascript" src="static/custom/fileupload/js/locales/zh.js"></script>
    <!-- <script type="text/javascript" src="static/custom/fileupload/themes/explorer-fa/theme.min.js"></script> -->
</head>
<body>
    <div class="htmleaf-container">
        <div class="container kv-main">
            <div class="row">
                <div class="col-lg-2"></div>

                <div class="col-lg-9">
                    <form id="form"enctype="multipart/form-data">
                        <div class="form-group">
                            <input id="files" name="files" class="file-loading"  type="file" multiple data-show-caption="true"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

1.3.3 编写js

<script type="text/javascript">
        $(function () {
            var img = ['jpg','jpeg', 'png','gif', 'bmp']; //图片
            var txt = ['txt','sql','log'];  //文字
            var out = ['cfg','dat','hlp','tmp'];  //文字
            var ott = ['xlsx','xls','pdf','docx','doc','pptx',];    //表格，幻灯片，WORD，PDF
            var sin = ['mpg', 'mpeg', 'avi', 'rm', 'rmvb','mov', 'wmv','asf', 'dat', 'mp4']; //视频
            var ein = ['cd','ogg','mp3','asf','wma','wav','mp3pro','rm','real','ape','module','midi','vqf']; //音频
            var spe = ['jar','war','zip','rar','tag.gz'];//压缩包
            var exe = ['exe','bat','com','msi']; //可执行文件
            var zat = ['chm','ink'];    //特殊文件
            var viw = ['ftl','htm','html','jsp']; //页面
            var rol = ['js','css'];

            initFileInput('#files','fileupload/filesupload', img.concat(txt).concat(ott).concat(spe).concat(zat).concat(viw), {} );
        });

        function initFileInput(formGropId, url, fileCan, extraData) {
            $(formGropId).fileinput({
                theme: "explorer", //主题
                language: 'zh', //设置语言
                uploadUrl: url,
               // uploadExtraData: extraData,
                allowedFileExtensions: fileCan,//接收的文件后缀
                maxFileSize: 1024 * 20,     //1024*20Kb = 20Mb
                minFileCount: 1,
                enctype: 'multipart/form-data',
                showCaption: true,//是否显示标题
                showUpload: true, //是否显示上传按钮
                textEncoding:'utf-8',
                browseClass: "btn btn-primary", //按钮样式
                overwriteInitial: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                //previewFileIcon: '<i class="fa fa-file"></i>',
                //initialPreviewAsData: true, // defaults markup
                //preferIconicPreview: false, // 是否优先显示图标  false 即优先显示图片
                //showPreview: true,
                /*不同文件图标配置*/

                allowedPreviewTypes: false, //不预览
                previewSettings: {
                    image: {width: "100px", height: "120px"},
                },
                layoutTemplates: {
                    //actionUpload: '',   //取消上传按钮
                   // actionZoom: ''      //取消放大镜按钮
                }

            }).on('filepreupload', function(event, data, previewId, index){//上传中
                console.info(data);
            }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
                console.log('文件上传成功！' + data);
            }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
                console.log('文件上传失败！' + msg);
            })

        }

    </script>

具体的参数请参考下面博友的文章：

https://blog.csdn.net/lvshaorong/article/details/48730145

1.4 后台代码编写

1.4.1 启动类

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.transaction.annotation.EnableTransactionManagement;

/**
 * Created by wangbiao-019 on 2018/4/12.
 */
@SpringBootApplication   //= @Configuration + @EnableAutoConfiguration + @ComponentScan
@ServletComponentScan
//@EnableTransactionManagement//事务注解
public class Application extends SpringBootServletInitializer {
    private final static Logger logger = LoggerFactory.getLogger(Application.class);

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
        logger.info("SpringBoot Application Start Success");
    }
}

1.4.2 MVC全局配置

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Created by wangbiao-019 on 2018/4/4.
 */
@Configuration
public class MyMVCconfigCFG implements WebMvcConfigurer {
    private final static String URI_ROOT = "/";
    private final static String URI_CORS_STARTWITH = "/**";

    /*添加可跨域访问*/
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping(URI_CORS_STARTWITH);
    }

    /**/
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
       // registry.addViewController(URI_CORS_STARTWITH +URI_ROOT +URI_VIEWCONTROLLER_REDIRECT).setViewName(URI_VIEWCONTROLLER_REDIRECT);
        registry.addViewController("/fileupload").setViewName("1/fileupload");
    }

    /*加入WEB-INF下静态资源访问*/
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
       registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        //registry.addResourceHandler("/static*/**").addResourceLocations("/WEB-INF/"+"/static/");
    }
}

关于静态资源的访问可参考我上一篇文章：

https://blog.csdn.net/apathecrazyfan/article/details/79638731

如果你想了解更多请看下面这篇文章：

https://blog.csdn.net/isea533/article/details/50412212

1.4.3 Controller

import com.example.demo.common.entity.ResponseMessage;
import com.example.demo.common.util.WebFileUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
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.util.List;

/**
 * Created by wangbiao-019 on 2018/4/12.
 */
@Controller
@RequestMapping("/fileupload")
public class FileUploadController {
    private static final Logger logger = LoggerFactory.getLogger(FileUploadController.class);
    private final static String SAVE_PATH = "D:/a/b";

    @PostMapping("/filesupload")
    @ResponseBody
    public ResponseMessage uploadFiles(@RequestParam(value = "files", required = false)MultipartFile mpf){
        logger.info("[进入了文件上传处理方法]");

        /*if(mpfs != null){
            logger.info(mpfs.getName() + "^^^" + mpfs.getOriginalFilename());
        }*/
       boolean flag = false;
       if(mpf != null){
           flag = WebFileUtil.saveFile(mpf, SAVE_PATH, mpf.getOriginalFilename());
        }
        return mpf != null ? flag ?
                new ResponseMessage("200", "上传成功", mpf.getOriginalFilename()) :
                new ResponseMessage("200", "上传失败", mpf.getOriginalFilename()) :
                new ResponseMessage("300", "上传失败", null);
    }
}

1.4.4 Util类

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by wangbiao-019 on 2018/4/8.
 */
public class CreateFileUtil {
    private final static Logger logger = LoggerFactory.getLogger(CreateFileUtil.class);
    public static String KEY_FLAG = "flag";
    public static String KEY_TEXT = "text";
    public static String KEY_NAME = "name";

    //1.创建文件
    public static Map<String, Object> createFile(String destFileName) {
        logger.info("文件路径为=" + destFileName);
        Map<String, Object> map = new HashMap<String, Object>();
        File file = new File(destFileName);
        if(file.exists()) {
            map.put(KEY_FLAG, true);
            map.put(KEY_NAME, file.getName());
            map.put(KEY_TEXT,"创建单个文件" + destFileName + "失败，目标文件已经存在！");
            return map;
        }
        if (destFileName.endsWith(File.separator)) {
            logger.info("创建单个文件" + destFileName + "失败，目标文件不能为目录！");
            map.put(KEY_FLAG, false);
            map.put(KEY_NAME, null);
            map.put(KEY_TEXT,"创建单个文件" + destFileName + "失败，目标文件不能为目录！");
            return map;
        }
        //判断目标文件所在的目录是否存在
        if(!file.getParentFile().exists()) {
            //如果目标文件所在的目录不存在，则创建父目录
            logger.info("目标文件所在目录不存在，准备创建它！");
            if(!file.getParentFile().mkdirs()) {
                logger.info("创建目标文件所在目录失败！");
                map.put(KEY_FLAG, false);
                map.put(KEY_NAME, null);
                map.put(KEY_TEXT,"创建目标文件所在目录失败！");
                return map;
            }
        }
        //创建目标文件
        try {
            if (file.createNewFile()) {
                logger.info("创建单个文件" + destFileName + "成功！");
                map.put(KEY_FLAG, true);
                map.put(KEY_NAME, file);
                map.put(KEY_TEXT,"创建单个文件" + destFileName + "成功！");
                return map;
            } else {
                logger.info("创建单个文件" + destFileName + "失败！");
                map.put(KEY_FLAG, false);
                map.put(KEY_NAME, null);
                map.put(KEY_TEXT,"创建单个文件" + destFileName + "失败！");
                return map;
            }
        } catch (IOException e) {
            e.printStackTrace();
            logger.error("创建单个文件" + destFileName + "失败！" + e.getMessage());
            map.put(KEY_FLAG, false);
            map.put(KEY_NAME, null);
            map.put(KEY_TEXT,"创建单个文件" + destFileName + "失败！" + e.getMessage());
            return map;
        }
    }

    //2.创建目录
    public static Map<String, Object> createDir(String destDirName) {
        Map<String, Object> map = new HashMap<String, Object>();
        File dir = new File(destDirName);
        if (dir.exists()) {
            map.put(KEY_FLAG, true);
            map.put(KEY_NAME, dir);
            map.put(KEY_TEXT,"目录已存在！");
            return map;
        }
        if (!destDirName.endsWith(File.separator)) {
            destDirName = destDirName + File.separator;
        }
        //创建目录
        if (dir.mkdirs()) {
            logger.info("创建目录" + destDirName + "成功！");
            map.put(KEY_FLAG, true);
            map.put(KEY_NAME, dir);
            map.put(KEY_TEXT,"创建目录" + destDirName + "成功！");
            return map;
        } else {
            logger.info("创建目录" + destDirName + "失败！");
            map.put(KEY_FLAG, false);
            map.put(KEY_NAME, dir);
            map.put(KEY_TEXT,"创建目录" + destDirName + "失败！");
            return map;
        }
    }

    //3.创建临时文件
    public static String createTempFile(String prefix, String suffix, String dirName) {
        File tempFile = null;
        if (dirName == null || "".endsWith(dirName)) {
            try{
                //在默认文件夹下创建临时文件
                tempFile = File.createTempFile(prefix, suffix);
                logger.error("在默认创建临时文件成功！");
                //返回临时文件的路径
                return tempFile.getCanonicalPath();
            } catch (IOException e) {
                e.printStackTrace();
                logger.error("创建临时文件失败！" + e.getMessage());
                return null;
            }
        } else {
            File dir = new File(dirName);
            //如果临时文件所在目录不存在，首先创建
            if (!dir.exists()) {
                if (!(boolean)CreateFileUtil.createDir(dirName).get(KEY_FLAG)) {
                    logger.info("创建临时文件失败，不能创建临时文件所在的目录！");
                    return null;
                }
            }
            try {
                //在指定目录下创建临时文件
                tempFile = File.createTempFile(prefix, suffix, dir);
                return tempFile.getCanonicalPath();
            } catch (IOException e) {
                e.printStackTrace();
                logger.error("创建临时文件失败！" + e.getMessage());
                return null;
            }
        }
    }
}

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.Map;

/**
 * Created by wangbiao-019 on 2018/4/8.
 */
public class WebFileUtil {
    private final static Logger logger = LoggerFactory.getLogger(WebFileUtil.class);

    //public static String UNIFY_FILE_NAME = "naqi";
    //public static String UNIFY_FILE_PUNCTUATE = ".";
    //public static String UNIFY_FILE_SEPARE = "/";
    /**
     * 保存上传的文件
     * @param uploadFile 上传的文件
     * @param destPath 路径
     * @param fileName 文件名称
     * @return true|false
     */
    public static boolean saveFile(MultipartFile uploadFile, String destPath, String fileName) {
        //Encrypt encrypt = new Encrypt();
        //Map<String, Object> map = CreateFileUtil.createFile(destPath + UNIFY_FILE_SEPARE +
         //       encrypt.md5(UNIFY_FILE_NAME) + fileName.substring(fileName.indexOf(UNIFY_FILE_PUNCTUATE)));

        Map<String, Object> map = CreateFileUtil.createFile(destPath + File.separator  + fileName);

        logger.info("[创建文件目录成功/保存至服务器]");
        //保存文件
        try {
            uploadFile.transferTo((File)map.get(CreateFileUtil.KEY_NAME));
            logger.info("[保存成功/保存至服务器]");
            return true;
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
            logger.error(e.getMessage(), e);
            return false;
        }
    }
}

1.4.5 消息类

public class ResponseMessage {
    private String code;
    private String msg;
    private Object obj;

    public ResponseMessage(){}
    public ResponseMessage(String code, String msg, Object obj) {
        this.code = code;
        this.msg = msg;
        this.obj = obj;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getObj() {
        return obj;
    }

    public void setObj(Object obj) {
        this.obj = obj;
    }

    @Override
    public String toString() {
        return "{" +
                "code='" + code + '\'' +
                ", msg='" + msg + '\'' +
                ", obj=" + obj +
                '}';
    }
}

2 验证

2.1 选择桌面的三个文件，点击上传（异步）

此时出现两个是失败的：

看下后台打印的日志：

2018-04-16 17:15:36.912  INFO 7400 --- [131-8080-exec-6] c.e.d.o.controller.FileUploadController  : [进入了文件上传处理方法]
2018-04-16 17:15:36.912  INFO 7400 --- [131-8080-exec-7] c.e.d.o.controller.FileUploadController  : [进入了文件上传处理方法]
2018-04-16 17:15:36.912  INFO 7400 --- [131-8080-exec-5] c.e.d.o.controller.FileUploadController  : [进入了文件上传处理方法]
2018-04-16 17:15:36.919  INFO 7400 --- [131-8080-exec-5] c.e.demo.common.util.CreateFileUtil      : 文件路径为=D:/a/b\2.xlsx
2018-04-16 17:15:36.919  INFO 7400 --- [131-8080-exec-6] c.e.demo.common.util.CreateFileUtil      : 文件路径为=D:/a/b\1-1.xlsx
2018-04-16 17:15:36.919  INFO 7400 --- [131-8080-exec-7] c.e.demo.common.util.CreateFileUtil      : 文件路径为=D:/a/b\1.xlsx
2018-04-16 17:15:36.919  INFO 7400 --- [131-8080-exec-5] c.e.demo.common.util.CreateFileUtil      : 目标文件所在目录不存在，准备创建它！
2018-04-16 17:15:36.919  INFO 7400 --- [131-8080-exec-6] c.e.demo.common.util.CreateFileUtil      : 目标文件所在目录不存在，准备创建它！
2018-04-16 17:15:36.919  INFO 7400 --- [131-8080-exec-7] c.e.demo.common.util.CreateFileUtil      : 目标文件所在目录不存在，准备创建它！
2018-04-16 17:15:36.920  INFO 7400 --- [131-8080-exec-6] c.e.demo.common.util.CreateFileUtil      : 创建目标文件所在目录失败！
2018-04-16 17:15:36.920  INFO 7400 --- [131-8080-exec-5] c.e.demo.common.util.CreateFileUtil      : 创建目标文件所在目录失败！
2018-04-16 17:15:36.920  INFO 7400 --- [131-8080-exec-7] c.e.demo.common.util.CreateFileUtil      : 创建单个文件D:/a/b\1.xlsx成功！
2018-04-16 17:15:36.920  INFO 7400 --- [131-8080-exec-7] c.example.demo.common.util.WebFileUtil   : [创建文件目录成功/保存至服务器]
2018-04-16 17:15:36.920  INFO 7400 --- [131-8080-exec-5] c.example.demo.common.util.WebFileUtil   : [创建文件目录成功/保存至服务器]
2018-04-16 17:15:36.920  INFO 7400 --- [131-8080-exec-6] c.example.demo.common.util.WebFileUtil   : [创建文件目录成功/保存至服务器]
2018-04-16 17:15:36.921  INFO 7400 --- [131-8080-exec-7] c.example.demo.common.util.WebFileUtil   : [保存成功/保存至服务器]
2018-04-16 17:15:36.922 ERROR 7400 --- [131-8080-exec-5] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.NullPointerException] with root cause

java.lang.NullPointerException: null
	at org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile.transferTo(StandardMultipartHttpServletRequest.java:253) ~[spring-web-5.0.4.RELEASE.jar:5.0.4.RELEASE]
	at com.example.demo.common.util.WebFileUtil.saveFile(WebFileUtil.java:37) ~[main/:na]

发现文件 2.xlsx, 1-1.xlsx, 1.xlsx是exec-6， exec-7， exec-5这3个线程同时运行的，然后exec-7线程首先创建a/b目录，而线程exec-5和线程exec-6在创建目录 a/b的时候发现目录 a/b已经被exec-7创建了，从而进入CreateFileUtil的这段代码：

else {
                logger.info("创建单个文件" + destFileName + "失败！");
                map.put(KEY_FLAG, false);
                map.put(KEY_NAME, null);
                map.put(KEY_TEXT,"创建单个文件" + destFileName + "失败！");
                return map;
            }

使他返回了一个 KEY_NAME 的值为null的map，解决方法：1、去掉这里的return；2采用同步上传，一个一个来； 3、上传第二次。

3. 注意事项

3.1：fileupload是可以附带额外参数的，在 $("#__").fileupload({ }); 里面添加 uploadExtraData：{data}

但你若有这个参数，如果传的参数没有的话，用 uploadExtraData ：｛｝，不能用 uploadExtraData : null, 加了参数过后它等于是把参数加在了 url后面，如 url :'a/b/c', uploadExtraData :{'name':'wb','age':'23'}；等同于 url：'a/b/c?name=wb&age=23',还有一点值得注意的是加了 uploadExtraData额外参数后，请求方法必须是GET

3.2：关于后台控制器接收文件的时候注解@RequestParam的value值必须与前端页面<input />标签的 name属性值相同，

还有一点就是无论是同步上传还是异步上传，他都是一个线程处理一个文件，所以接收的文件类型为 MultipartFile, 后来发现用MultipartFile[] 也是可以接收到的，但只会接收一个文件，而List<MultipartFile>则不可以。

ApacheCrazyFan

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Spring Boot の bootstrap fileupload 可拖拽多文件上传

1、创建一个springboot的gradle项目具体步骤不写，下面是一些基本依赖与配置:1.1 build.gradlebuildscript { ext { springBootVersion = '2.0.0.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springfr...
复制链接

扫一扫

专栏目录