使用fileinput插件批量上传文件

2019年09月17日 242 次阅读 0 条评论

使用fileinput插件批量上传文件

前言

  最近在做项目的时候涉及文件批量上传,使用bootstrap结合fileinput插件批量上传文件!以下是我在使用fileinput上传文件的过程。项目是基于springboot+thymeleaf的,所以文章中会有thymeleaf的语法。

使用方式

  1. 下载fileinput插件的静态文件

    FileInput官网:https://plugins.krajee.com/file-input

  2. 引入静态资源
<!-- 插件所需css -->
<link th:href="@{/fileinput/css/fileinput.css}" media="all" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link th:href="@{/fileinput/themes/explorer-fas/theme.css}" media="all" rel="stylesheet" type="text/css"/>
   
<!-- 所需js文件,注意jq建议3.3.1版本,之前使用低版本的jq存在问题 -->
<script th:src="@{/fileinput/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/fileinput/js/plugins/piexif.js}" type="text/javascript"></script>
<script th:src="@{/fileinput/js/plugins/sortable.js}" type="text/javascript"></script>
<script th:src="@{/fileinput/js/fileinput.js}" type="text/javascript"></script>
<!-- 中文语言包 -->
<script th:src="@{/fileinput/js/locales/zh.js}" type="text/javascript"></script>
<script th:src="@{/fileinput/themes/fas/theme.js}" type="text/javascript"></script><script th:src="@{/fileinput/themes/explorer-fas/theme.js}" type="text/javascript"></script>
  1. 在html中使用如下代码
<form enctype="multipart/form-data" method="post">
    <div class="file-loading">
           <input id="kv-explorer" type="file" name="file" multiple>
       </div>
</form>
  1. 使用js初始化插件
//设置上传文件地址、插件语言、允许上传的文件格式
$(function(){
    $("#kv-explorer").fileinput({
           language: 'zh',
           theme: 'explorer-fas',
           uploadUrl: '/colorful/uploadPic',
           overwriteInitial: true,
           allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg', 'bmp', 'webp']
       });
});
  1. 后台接收文件Springboot,返回json数据
@RequestMapping("/uploadPic")
@ResponseBody
public Map<String, String> uploadPic(@RequestParam("file") MultipartFile file) {
   Map<String, String> fileNameMap = FileUtil.uploadFile(file, FileUtil.FILE_PATH + "picture/");
   Map<String, String> result = new Hashtable<>();
   if(!fileNameMap.isEmpty()){
       QueImages queImages = new QueImages();
       queImages.setName(fileNameMap.get("originalFilename"));
       queImages.setPath("picture/"+fileNameMap.get("fileName"));
       int insert = queImagesService.insert(queImages);
       if(insert > 0){
           result.put("success","文件上传成功!");
           return result;
       }
   }
   result.clear();
   //注意json数据中包含{"error":"失败信息"},插件会认为上传文件失败
   //上传文件成功不要反悔带有error键值的json数据
   result.put("error","文件上传失败!");
   return result;
}
  1. uploadFile方法
public static final String FILE_PATH = "D:/upload/";
   
public static Map<String,String> uploadFile(MultipartFile file, String path) {
    //文件扩展名
    String extension = file.getOriginalFilename().substring(file.getOriginalFilename().indexOf("."));
    //构建文件扩展名
    String filename = UUID.randomUUID().toString().replace("-", "") + Long.toHexString(System.currentTimeMillis()) + extension;
    String filepath = path + filename;
    Map<String,String> map = new Hashtable<>();
    try {
        File dir = new File(path);
        //判断文件夹是否存在
            if (!dir.exists()) {
            //创建文件夹
            dir.mkdirs();
        }
        //转存文件
        file.transferTo(new File(filepath));
        map.put("originalFilename",file.getOriginalFilename());
        map.put("fileName",filename);
        return map;
    } catch (IOException e) {
        e.printStackTrace();
    }
    //清空
    map.clear();
    return map;
}
  1. 设置springboot上传文件大小被限制问题
servlet:
  multipart:
    max-request-size: 200MB # 设置单次文件请求总大小
    max-file-size: 200MB    # 设置单个文件的大小(超过这个大小的文件不能上传成功)

效果预览

  • 未选择文件时

未选择文件时

  • 选择上传文件后

选择上传文件后

  • 文件上传成功

文件上传成功

总结

  博主也是第一次使用fileinput插件批量上传文件,使用流程比较简单,几句js初始化后就可以使用,非常方便,不过值得注意的是文件上传成功后接口返回的json数据键一定不能包含error,否者会被插件判定为文件上传失败。

雨落凋殇

聆听雨落的声音,俯瞰凋零的落叶。伫细雨之中,感雨落之殇。

文章评论(0)