Explorar o código

通知公告图片上传

lchao hai 4 meses
pai
achega
a59a4aad02

+ 45 - 1
qmjszx-admin/src/main/resources/templates/system/notice/add.html

@@ -3,6 +3,7 @@
 <head>
 	<th:block th:include="include :: header('新增通知公告')" />
 	<th:block th:include="include :: summernote-css" />
+	<th:block th:include="include :: bootstrap-fileinput-css"/>
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -51,10 +52,20 @@
 					</div>
 				</div>
 			</div>
+				<div class="form-group">
+					<label class="col-sm-2 control-label">图片:</label>
+					<div class="col-sm-10">
+						<input type="hidden" name="noticeImg">
+						<div class="file-loading">
+							<input class="form-control file-upload" id="noticeImg" name="file" type="file"  >
+						</div>
+					</div>
+				</div>
 		</form>
 	</div>
     <th:block th:include="include :: footer" />
     <th:block th:include="include :: summernote-js" />
+	<th:block th:include="include :: bootstrap-fileinput-js"/>
     <script type="text/javascript">
         var prefix = ctx + "system/notice";
 
@@ -70,7 +81,40 @@
                 }
             }
 		});
-	    
+
+		$(".file-upload").each(function (i) {
+			var inputName = this.id;
+			var val = $("input[name='" + inputName + "']").val();
+			// 将已上传的图片路径分割成数组
+			var initialPreview = val ? val.split(',') : [];
+
+			$(this).fileinput({
+				uploadUrl: ctx + 'common/upload',
+				initialPreviewAsData: true,
+				initialPreview: initialPreview,
+				maxFileCount: 1,
+				allowedFileExtensions: ['jpg', 'png'],
+				maxFileSize: 10240,
+				multiple: false,
+			}).on('fileuploaded', function (event, data, previewId, index) {
+				var inputName = event.currentTarget.id;
+				var fullUrl = data.response.url; // 获取完整的URL
+				var urlObject = new URL(fullUrl);
+				var relativePath = urlObject.pathname; // 获取路径部分
+				var newBaseUrl = "http://localhost"; // 新的基URL
+				var absoluteUrl = newBaseUrl + relativePath; // 拼接完整的URL
+
+				// 直接设置输入框的值为新上传的图片URL
+				$("input[name='" + inputName + "']").val(absoluteUrl);
+			}).on('fileremoved', function (event, key, jqXHR, pd) {
+				var inputName = event.currentTarget.id;
+				// 移除文件后,清空输入框的值
+				$("input[name='" + inputName + "']").val('');
+			});
+
+			$(this).fileinput('_initFileActions');
+		});
+
 	    // 上传文件
 	    function sendFile(file, obj) {
 	        var data = new FormData();

+ 46 - 1
qmjszx-admin/src/main/resources/templates/system/notice/edit.html

@@ -3,6 +3,7 @@
 <head>
 	<th:block th:include="include :: header('修改通知公告')" />
 	<th:block th:include="include :: summernote-css" />
+    <th:block th:include="include :: bootstrap-fileinput-css"/>
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -52,10 +53,20 @@
 					</div>
 				</div>
 			</div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label">图片:</label>
+                    <div class="col-sm-10">
+                        <input type="hidden" name="noticeImg" th:field="*{noticeImg}">
+                        <div class="file-loading">
+                            <input class="form-control file-upload" id="noticeImg" name="file" type="file" >
+                        </div>
+                    </div>
+                </div>
 		</form>
     </div>
     <th:block th:include="include :: footer" />
     <th:block th:include="include :: summernote-js" />
+    <th:block th:include="include :: bootstrap-fileinput-js"/>
     <script type="text/javascript">
         var prefix = ctx + "system/notice";
     
@@ -75,7 +86,41 @@
 			var content = $("#noticeContent").val();
 		    $('#editor').summernote('code', content);
 	    });
-	    
+
+
+        $(".file-upload").each(function (i) {
+            var inputName = this.id;
+            var val = $("input[name='" + inputName + "']").val();
+            // 将已上传的图片路径分割成数组
+            var initialPreview = val ? val.split(',') : [];
+            $(this).fileinput({
+                uploadUrl: ctx + 'common/upload',
+                initialPreviewAsData: true,
+                initialPreview: initialPreview,
+                maxFileCount: 1,
+                allowedFileExtensions: ['jpg', 'png'],
+                maxFileSize: 10240,
+                multiple: false,
+            }).on('fileuploaded', function (event, data, previewId, index) {
+                var inputName = event.currentTarget.id;
+                var existingValue = $("input[name='" + inputName + "']").val();
+                var fullUrl = data.response.url; // 获取完整的URL
+                var urlObject = new URL(fullUrl);
+                var relativePath = urlObject.pathname; // 获取路径部分
+                // var newBaseUrl = "http://192.168.4.27"; // 新的基URL
+                var newBaseUrl = "http://localhost"; // 新的基URL
+                var absoluteUrl = newBaseUrl + relativePath; // 拼接完整的URL
+
+                // 如果已经存在值,则替换为新值
+                $("input[name='" + inputName + "']").val(absoluteUrl);
+            }).on('fileremoved', function (event, id, index) {
+                var inputName = event.currentTarget.id;
+                $("input[name='" + inputName + "']").val(''); // 移除后清空输入框
+            });
+
+            $(this).fileinput('_initFileActions');
+        });
+
 	    // 上传文件
 	    function sendFile(file, obj) {
 	        var data = new FormData();

+ 5 - 0
qmjszx-admin/src/main/resources/templates/system/notice/notice.html

@@ -137,6 +137,11 @@
                     sortable: true
                 },
                 {
+                    field: 'noticeImg',
+                    title: '图片',
+                    visible: false
+                },
+                {
                     title: '操作',
                     align: 'center',
                     formatter: function (value, row, index) {

+ 3 - 0
qmjszx-system/src/main/java/beilv/system/domain/SysNotice.java

@@ -45,6 +45,9 @@ public class SysNotice extends BaseEntity
     /** 发布时间 */
     private Date releaseTime;
 
+    /** 图片 */
+    private String noticeImg;
+
     public Long getNoticeId()
     {
         return noticeId;

+ 8 - 2
qmjszx-system/src/main/resources/mapper/system/SysNoticeMapper.xml

@@ -18,6 +18,7 @@
         <result property="topped" column="topped"/>
         <result property="sort" column="sort"/>
         <result property="releaseTime" column="release_time"/>
+        <result property="noticeImg" column="notice_img"/>
     </resultMap>
 
     <sql id="selectNoticeVo">
@@ -33,7 +34,8 @@
                remark,
                topped,
                sort,
-               release_time
+               release_time,
+               notice_img
         from sys_notice
     </sql>
 
@@ -75,6 +77,7 @@
         <if test="topped != null and topped != ''">topped,</if>
         <if test="sort != null and sort != ''">sort,</if>
         <if test="releaseTime != null">release_time,</if>
+        <if test="noticeImg != null">notice_img,</if>
         create_time
         )values(
         <if test="noticeTitle != null and noticeTitle != ''">#{noticeTitle},</if>
@@ -86,6 +89,7 @@
         <if test="topped != null and topped != ''">#{topped},</if>
         <if test="sort != null and sort != ''">#{sort},</if>
         <if test="releaseTime != null">#{releaseTime},</if>
+        <if test="noticeImg != null">#{noticeImg},</if>
         sysdate()
         )
     </insert>
@@ -101,6 +105,7 @@
             <if test="topped != null and topped != ''">topped = #{topped},</if>
             <if test="sort != null and sort != ''">sort = #{sort},</if>
             <if test="releaseTime != null">release_time = #{releaseTime},</if>
+            <if test="noticeImg != null">notice_img = #{noticeImg},</if>
             update_time = sysdate()
         </set>
         where notice_id = #{noticeId}
@@ -127,7 +132,8 @@
             remark,
             topped,
             sort,
-            release_time
+            release_time,
+            notice_img
         FROM
             sys_notice
         WHERE