• thymeleaf，bootstrap-fileinput 多文件上传

    组件遍历上传

    一、前端

    1. html>
    2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
    3. <head>
    4.     <th:block th:include="include :: header('修改固定资产信息')" />
    5.     <th:block th:include="include :: datetimepicker-css" />
    6.     <th:block th:include="include :: bootstrap-fileinput-css"/>
    7. head>
    8. <body class="white-bg">
    9.     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    10.         <form class="form-horizontal m" id="form-gdzcxx-edit" th:object="${bizGdzcxx}">
    11.             <input name="gdzcxxId" th:field="*{gdzcxxId}" type="hidden">
    12.             <div class="form-group">    
    13.                 <label class="col-sm-3 control-label is-required">资产名称：label>
    14.                 <div class="col-sm-8">
    15.                     <input name="zcmc" th:field="*{zcmc}" class="form-control" type="text" required>
    16.                 div>
    17.             div>
    18.             <div class="form-group">    
    19.                 <label class="col-sm-3 control-label">资产型号：label>
    20.                 <div class="col-sm-8">
    21.                     <input name="zcxh" th:field="*{zcxh}" class="form-control" type="text">
    22.                 div>
    23.             div>
    24.             <div class="form-group">
    25.                 <label class="col-sm-3 control-label">资产照片：label>
    26.                 <div class="col-sm-8">
    27.                     <input type="text" name="zczp" th:field="*{zczp}">
    28.                     <div class="file-loading">
    29.                         <input class="form-control file-upload" id="zczp" name="file" type="file" multiple>
    30.                     div>
    31.                 div>
    32.             div>
    33.         form>
    34.     div>
    35.     <th:block th:include="include :: footer" />
    36.     <th:block th:include="include :: datetimepicker-js" />
    37.     <th:block th:include="include :: bootstrap-fileinput-js"/>
    38.     <script th:inline="javascript">
    39.         var prefix = ctx + "biz/gdzcxx";
    40.         $("#form-gdzcxx-edit").validate({
    41.             focusCleanup: true
    42.         });
    43.  
    44.         function submitHandler() {
    45.             if ($.validate.form()) {
    46.                 $.operate.save(prefix + "/edit", $('#form-gdzcxx-edit').serialize());
    47.             }
    48.         }
    49.         $(".file-upload").each(function (i) {
    50.             var val = $("input[name='" + this.id + "']").val();
    51.             var preView = val.split(',');
    52.             $(this).fileinput({
    53.                 'uploadUrl': ctx + 'common/upload',
    54.                 initialPreviewAsData: true,
    55.                 initialPreview: preView,
    56.                 maxFileCount: 10,
    57.                 maxFileSize: 1000,
    58.                 autoReplace: true
    59.             }).on('fileuploaded', function (event, data, previewId, index) {
    60.                 //多文件上传后，将文件名路径用“,”拼接起来
    61.                 if(data.response.fileName){
    62.                     var filenames = data.response.fileName;
    63.                     var currentFilename = $("input[name='" + event.currentTarget.id + "']").val();
    64.                     if(currentFilename!=''){
    65.                         filenames = currentFilename +',' +filenames;
    66.                     }
    67.                     $("input[name='" + event.currentTarget.id + "']").val(filenames);
    68.                 }
    69.             }).on('fileremoved', function (event, id, index) {
    70.                 var fileIndex = index.replace('init-','');
    71.                 var currentFilename = $("input[name='" + event.currentTarget.id + "']").val();
    72.                 var fileNames = currentFilename.split(',');
    73.                 var lastFileNames = '';
    74.                 for(var i in fileNames){
    75.                     if(i == parseInt(fileIndex)){
    76.                         continue;
    77.                     }
    78.                     lastFileNames += fileNames[i]+',';
    79.                 }
    80.                 lastFileNames = lastFileNames.split(',').slice(0,-1).join(',');
    81.                 $("input[name='" + event.currentTarget.id + "']").val(lastFileNames);
    82.             })
    83.             $(this).fileinput('_initFileActions');
    84.         });
    85.     script>
    86. body>
    87. html>

    二、后端

    1.  
    2. @Controller
    3. @RequestMapping("/common")
    4. public class CommonController
    5. {
    6.     private static final Logger log = LoggerFactory.getLogger(CommonController.class);
    7.  
    8.     @Autowired
    9.     private ServerConfig serverConfig;
    10.     
    11.  
    12.     /**
    13.      * 通用上传请求（单个）
    14.      */
    15.     @PostMapping("/upload")
    16.     @ResponseBody
    17.     public AjaxResult uploadFile(MultipartFile file) throws Exception
    18.     {
    19.         try
    20.         {
    21.             // 上传文件路径
    22.             String filePath = "D:/upload";
    23.             // 上传并返回新文件名称
    24.             String fileName = FileUploadUtils.upload(filePath, file);
    25.             String url = serverConfig.getUrl() + fileName;
    26.             AjaxResult ajax = AjaxResult.success();
    27.             ajax.put("url", url);
    28.             ajax.put("fileName", fileName);
    29.             ajax.put("newFileName", FileUtils.getName(fileName));
    30.             ajax.put("originalFilename", file.getOriginalFilename());
    31.             return ajax;
    32.         }
    33.         catch (Exception e)
    34.         {
    35.             return AjaxResult.error(e.getMessage());
    36.         }
    37.     }
    38. }
    1. @Component
    2. public class ServerConfig
    3. {
    4.     /**
    5.      * 获取完整的请求路径，包括：域名，端口，上下文访问路径
    6.      * 
    7.      * @return 服务地址
    8.      */
    9.     public String getUrl()
    10.     {
    11.         HttpServletRequest request = ServletUtils.getRequest();
    12.         return getDomain(request);
    13.     }
    14.  
    15.     public static String getDomain(HttpServletRequest request)
    16.     {
    17.         StringBuffer url = request.getRequestURL();
    18.         String contextPath = request.getServletContext().getContextPath();
    19.         return url.delete(url.length() - request.getRequestURI().length(), url.length()).append(contextPath).toString();
    20.     }
    21. }

  • 相关阅读:
    kantts docker化
    在Markdown文件中快速插入本地图片
    创建对象在堆区如何分配内存
    数据推荐 | 自然场景OCR文字识别数据集一览
    Vue.js vs React vs Angular
    带团队后的日常思考（十四）
    面试题：Java中为什么只有值传递？
    JMeter入门教程(16)——非GUI运行
    Maven高级
    Java系列 - 反射
  • 原文地址：https://blog.csdn.net/yetyrain/article/details/133829835