...

src/main/java/com/nbclass/activity/controller/ContentController.java

@@ -303,6 +303,10 @@ public class ContentController extends BaseController {
                 }
             }
         }
+        if(entity.getAttachment()!=null){
+            String s = JSON.toJSONString(entity.getAttachment());
+            entity.setAttachment(s);
+        }
         String desc = null;
     	if(entity.getId()!=null && entity.getId()>0){
             service.update(entity);

src/main/java/com/nbclass/activity/controller/OssUploadController.java

@@ -1,9 +1,12 @@
 package com.nbclass.activity.controller;
 
 import java.io.IOException;
+import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Date;
+import java.util.List;
 
+import com.nbclass.activity.model.OssFile;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -38,8 +41,8 @@ public class OssUploadController extends BaseController{
 	 * @return
 	 */
     @PostMapping("/uploadFile")
-    public Result fileUploadTest(@RequestParam(required=false, value="file")MultipartFile file, String caseType, String category){
+    public Result fileUploadTest(@RequestParam(required=false, value="file")MultipartFile[] file, String caseType, String category){
-    	if(file==null || file.isEmpty()){
+    	if(file==null || file.length == 0){
     		throw new ParameterException("请选择文件");
     	}
     	/*if(StringUtils.isBlank(caseType)) {
@@ -55,38 +58,52 @@ public class OssUploadController extends BaseController{
 			throw new ParameterException("文件类别参数有误");
 		}
 		try {
-			String suffix = "", ori_name = file.getOriginalFilename();
+			List<OssFile> list = new ArrayList<>();
-			if(StringUtils.isNotBlank(ori_name)){
+			for (MultipartFile multipartFile : file) {
+				if (multipartFile.isEmpty()) {
+					throw new ParameterException("上传文件失败");
+				}
+
+				String suffix = "", ori_name = multipartFile.getOriginalFilename();
+				if (StringUtils.isNotBlank(ori_name)) {
 					suffix = ori_name.substring(ori_name.lastIndexOf("."), ori_name.length());
 					suffix = suffix.toLowerCase();
 				}
-			if(("icon".equals(category)||"image".equals(category))
+				if (("icon".equals(category) || "image".equals(category))
-					&& !Arrays.<String> asList(Const.UPLOAD_IMAGE_SUFFIX.split(",")).contains(suffix)) {
+						&& !Arrays.<String>asList(Const.UPLOAD_IMAGE_SUFFIX.split(",")).contains(suffix)) {
 					throw new ParameterException("请上传正确的图片");
 				}
 
-			if("video".equals(category) && !Arrays.<String> asList(Const.UPLOAD_VIDEO_SUFFIX.split(",")).contains(suffix)) {
+				if ("video".equals(category) && !Arrays.<String>asList(Const.UPLOAD_VIDEO_SUFFIX.split(",")).contains(suffix)) {
 					throw new ParameterException("请上传正确的视频");
 				}
 
 				String daydir = CommonUtils.getSimpleDate(new Date(), "yyyyMM");
-			if("icon".equals(category)) { // icon图上传一年1个目录
+				if ("icon".equals(category)) { // icon图上传一年1个目录
 					daydir = CommonUtils.getSimpleDate(new Date(), "yyyy");
-			}else if("video".equals(category)) { // 视频也是按一年1个目录
+				} else if ("video".equals(category)) { // 视频也是按一年1个目录
 					daydir = CommonUtils.getSimpleDate(new Date(), "yyyy");
 				}
 
-			String filename = CommonUtils.getSimpleDate(new Date(), "yyyyMMddHHmmss")+"_"+CommonUtils.getCode(5)+suffix;
+				String filename = CommonUtils.getSimpleDate(new Date(), "yyyyMMddHHmmss") + "_" + CommonUtils.getCode(5) + suffix;
 				// 组成的文件key eg. /casetype-h5/icons/xxx.jpg
-			String url = AliyunOSSUtils.uploadBytes("casetype-"+caseType+"/"+category+"s"+"/"+daydir, filename, file.getBytes());
+				String url = AliyunOSSUtils.uploadBytes("casetype-" + caseType + "/" + category + "s" + "/" + daydir, filename, multipartFile.getBytes());
+				OssFile ossFile = new OssFile();
+				ossFile.setUrl(url);
+				ossFile.setOri_name(ori_name);
+				list.add(ossFile);
+			}
 			JSONObject fileObj = new JSONObject();
-			fileObj.put("url", url);
+//			fileObj.put("url", url);
-			fileObj.put("ori_name", ori_name);
+//			fileObj.put("ori_name", ori_name);
-			return Result.success(fileObj);
+			fileObj.put("list",list);
+			System.out.println(fileObj);
+			return Result.success2(fileObj);
 		} catch (IOException e) {
 			log.error("上传到OSS文件异常", e);
 			return Result.error(e.getMessage()!=null ? e.getMessage() :"上传文件失败");
 		}
+
     }
 
 }

src/main/java/com/nbclass/vo/base/Result.java

@@ -18,6 +18,7 @@ public class Result {
     private String msg;
     private Object data;
     private Map<String,Object> map;
+    private Boolean success = true;
 
     public Result() {
     }
@@ -28,6 +29,12 @@ public class Result {
         this.data = data;
     }
 
+    public Result(int ret,boolean success, Object data) {
+        this.ret = ret;
+        this.success = success;
+        this.data = data;
+    }
+
     public static Result success() {
         return new Result(CoreConst.STATUS_SUCCESS, null, null);
     }
@@ -35,6 +42,11 @@ public class Result {
     public static Result success(Object data) {
         return new Result(CoreConst.STATUS_SUCCESS, null, data);
     }
+
+    public static Result success2(Object data) {
+        return new Result(CoreConst.STATUS_SUCCESS,true, data);
+    }
+
     public static Result success(Map<String,Object> map) {
         return new Result(CoreConst.STATUS_SUCCESS, null, map);
     }

src/main/resources/templates/content/edit2.html

@@ -1,6 +1,95 @@
 <link rel="stylesheet" th:href="@{/css/cases/content.css}" xmlns:th="http://www.w3.org/1999/xhtml"/>
 
+
+<script type="text/template" id="qq-template-manual-trigger">
+    <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
+        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
+            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
+        </div>
+        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
+            <span class="qq-upload-drop-area-text-selector"></span>
+        </div>
+        <div id="upload-button" class="buttons">
+            <div class="qq-upload-button-selector qq-upload-button">
+                <div>选择文件</div>
+            </div>
+            <button type="button" id="trigger-upload" class="btn btn-primary">
+                <i class="icon-upload icon-white"></i> 上传
+            </button>
+        </div>
+        <span class="qq-drop-processing-selector qq-drop-processing">
+                <span>Processing dropped files...</span>
+                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
+            </span>
+        <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
+            <li>
+                <div class="qq-progress-bar-container-selector">
+                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
+                </div>
+                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
+<!--                <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>-->
+                <span class="qq-upload-file-selector qq-upload-file"></span>
+                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
+                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
+                <span class="qq-upload-size-selector qq-upload-size"></span>
+                <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">删除</button>
+                <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">重试</button>
+                <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
+                <input type="hidden" id="attachment" name="attachment" th:value="${attachment}" style="display: none;">
+                <div style="height: 20px; line-height: 20px;">
+                    <a class="a_viewfile" href="javascript:;" target="_blank" title="点击下载"  style="height: 34px; line-height: 34px;"></a>
+                </div>
+            </li>
+        </ul>
+
+        <dialog class="qq-alert-dialog-selector">
+            <div class="qq-dialog-message-selector"></div>
+            <div class="qq-dialog-buttons">
+                <button type="button" class="qq-cancel-button-selector">关闭</button>
+            </div>
+        </dialog>
+
+        <dialog class="qq-confirm-dialog-selector">
+            <div class="qq-dialog-message-selector"></div>
+            <div class="qq-dialog-buttons">
+                <button type="button" class="qq-cancel-button-selector">No</button>
+                <button type="button" class="qq-ok-button-selector">Yes</button>
+            </div>
+        </dialog>
+
+        <dialog class="qq-prompt-dialog-selector">
+            <div class="qq-dialog-message-selector"></div>
+            <input type="text">
+            <div class="qq-dialog-buttons">
+                <button type="button" class="qq-cancel-button-selector">Cancel</button>
+                <button type="button" class="qq-ok-button-selector">Ok</button>
+            </div>
+        </dialog>
+    </div>
+</script>
+
+
 <style>
+    #trigger-upload {
+        color: white;
+        background-color: #00ABC7;
+        font-size: 14px;
+        padding: 7px 20px;
+        background-image: none;
+    }
+
+    #fine-uploader-manual-trigger .qq-upload-button {
+        margin-right: 15px;
+    }
+
+    #fine-uploader-manual-trigger .buttons {
+        width: 36%;
+    }
+
+    #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
+        width: 60%;
+    }
 	.ui-autocomplete{z-index: 100000;}
 	/* #tagNames_tagsinput{height: 34px !important; border-radius: 3px; box-shadow: none; border-color: #d2d6de;} */
 	div.tagsinput, div.tagsinput span.tag {padding: 3px !important;}
@@ -92,16 +181,20 @@
             </div>
         </div>
 
-        <div class="form-group">
+        <!--<div class="form-group">
             <label class="col-sm-2 control-label">附件：</label>
             <div class="col-sm-2">
                 <label class="btn btn-info" for="attachment_file" style="color:white;vertical-align:top;">上传</label>
-                <input type="file" id="attachment_file" name="file" style="display: none;">
+                <input type="file" id="attachment_file" name="file" multiple style="display: none;">
                 <input type="hidden" id="attachment" name="attachment" th:value="${attachment}" style="display: none;">
                 <div style="height: 20px; line-height: 20px;">
                     <a class="a_viewfile" href="javascript:;" target="_blank" title="点击下载"  style="height: 34px; line-height: 34px;"></a>
                 </div>
             </div>
+        </div>-->
+        <div class="form-group">
+            <label class="col-sm-2 control-label">附件：</label>
+            <div id="fine-uploader-manual-trigger"></div>
         </div>
 
         <div class="form-group">
@@ -315,14 +408,21 @@ var caseType = [[${caseType}]];
             dataType: "json",
             success: function (data) {
                 if (data.ret==0) {
-                	var ori_name = data.data.ori_name;
+                    console.log(data.data)
+                    $.each(data.data,function (n,value) {
+                        for(var i = 0 ; i < value.length;i++){
+                            var ori_name = value[i].ori_name;
+                            console.log(ori_name)
+                            console.log(ori_name.length)
                             if(ori_name.length>10)ori_name=ori_name.substring(0, 8)+"..."+ori_name.substring(ori_name.length-4, ori_name.length);
 
                             $('#attachment').parent().find('input[type="file"]').val(''); // 清空值
-                    $('#attachment').val(JSON.stringify(data.data));
+                            $('#attachment').val(JSON.stringify(value[i]));
-                    $(".a_viewfile").attr('href', data.data.url);
+                            $(".a_viewfile").attr('href', value[i].url);
                             $(".a_viewfile").text(ori_name);
                             $('.a_viewfile').show();
+                        }
+                    });
                 }else{
                     layer.msg(data.msg);
                 }
@@ -330,6 +430,61 @@ var caseType = [[${caseType}]];
         });
 	}
 
+    $('#fine-uploader-manual-trigger').fineUploader({
+        element: document.getElementById("fine-uploader-manual-trigger"),
+        template: 'qq-template-manual-trigger',
+        request: {
+            endpoint: '[[@{/console/tool/oss/uploadFile}]]?category=attachment&caseType=[[${caseType}]]',
+            inputName:"file"
+        },
+        thumbnails: {
+            placeholders: {
+                waitingPath: '/cases/img/waiting-generic.png',
+                notAvailablePath: '/cases/img/not_available-generic.png'
+            }
+        },
+        validation: {
+            allowedExtensions: ['jpeg', 'jpg', 'txt'],
+            itemLimit: 5,
+            sizeLimit: 5242880 // 5mb
+        },
+        autoUpload: false,
+        callbacks: {
+            onError: function (id, name, reason, maybeXhrOrXdr) {           //上传失败
+                alert("上传异常");
+            },
+            onComplete: function (id, fileName, responseJSON) {         //上传完成后
+                alert("上传成功");
+                console.log("responseJSON ",responseJSON)
+                if (responseJSON.ret === 0) {
+                    console.log(responseJSON.data)
+                    $.each(responseJSON.data,function (n,value) {
+                        for(var i = 0 ; i < value.length;i++){
+                            var ori_name = value[i].ori_name;
+                            console.log(ori_name)
+                            console.log(ori_name.length)
+                            if(ori_name.length>10)ori_name=ori_name.substring(0, 8)+"..."+ori_name.substring(ori_name.length-4, ori_name.length);
+
+                            $('#attachment').parent().find('input[type="file"]').val(''); // 清空值
+                            $('#attachment').val(JSON.stringify(value));
+                            $(".a_viewfile").attr('href', value[i].url);
+                            $(".a_viewfile").text(ori_name);
+                            $('.a_viewfile').show();
+                        }
+                    });
+                }
+            }
+        },
+    });
+
+    $('#trigger-upload').click(function() {
+        $('#fine-uploader-manual-trigger').fineUploader('uploadStoredFiles');
+    });
+
+    $("#upload-button").click(function (){
+        $(".ui-tooltip").remove()
+    });
+
 	// 上传视频
 	function uploadVideoFile(obj) {
         //如果没有文件
@@ -402,12 +557,13 @@ var caseType = [[${caseType}]];
 		// 加载附件内容
 		if($('#dataid').val() > 0){
 			var attachment = '[[${attachment}]]';
+			console.log(attachment)
 			if(attachment != null && attachment != undefined){
 				attachment=attachment.replace(new RegExp('&quot;','g'),'"');
 				if(attachment!=null && $.trim(attachment)!=''){
 					var jsondata = JSON.parse(attachment);
-					$('#attachment').parent().find('input[type="file"]').val(''); // 清空值
+					$('#trigger-upload').parent().find('input[type="file"]').val(''); // 清空值
-	                $('#attachment').val(attachment);
+	                $('#trigger-upload').val(attachment);
 	                $(".a_viewfile").attr('href', jsondata.url);
 	                $(".a_viewfile").text(jsondata.ori_name);
 	           		$('.a_viewfile').show();
@@ -623,6 +779,9 @@ var caseType = [[${caseType}]];
             }
         });
     });
+
+
+
 </script>
 
 <style type="text/css">

src/main/resources/templates/index/index.html

@@ -21,6 +21,7 @@
 	<link rel="stylesheet" th:href="@{https://s0.pstatp.com/cdn/expire-1-M/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css}"/>
 <!--    <link rel="stylesheet" th:href="@{https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css}"/>-->
     <link rel="stylesheet" th:href="@{/libs/select2/select2.min.css}"/>
+    <link rel="stylesheet" th:href="@{/libs/fineuploader/fine-uploader-new.min.css}"/>
 
     <link rel="stylesheet" th:href="@{/css/common.css}"/>
     <script th:src="@{/libs/jquery/jquery.min.js}"></script>
@@ -33,6 +34,7 @@
 <!--    <script th:src="@{https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-rc.0/js/i18n/zh-CN.min.js}"></script>-->
     <script th:src="@{/libs/select2/select2.min.js}"></script>
     <script th:src="@{/libs/select2/zh-CN.js}"></script>
+    <script th:src="@{/libs/fineuploader/jquery.fine-uploader.min.js}"></script>
     <!-- <script th:src="@{/libs/pace/pace.js}"></script> 进度插件 -->
     <script th:src="@{/libs/jquery/jquery.slimscroll.min.js}"></script>
     <script th:src="@{/libs/jquery/fastclick.min.js}"></script>