Commit @236a80f2675dc6c035403cf508e52e3d74fa4d91

nbs0105 2023-05-26

사이트 관리 이미지 썸네일 생성, 삭제(미완성)

@236a80f2675dc6c035403cf508e52e3d74fa4d91

c54c4b8

236a80f

base/src/main/webapp/WEB-INF/jsp/egovframework/mng/sym/sit/SiteInfoRegist.jsp

--- base/src/main/webapp/WEB-INF/jsp/egovframework/mng/sym/sit/SiteInfoRegist.jsp

+++ base/src/main/webapp/WEB-INF/jsp/egovframework/mng/sym/sit/SiteInfoRegist.jsp

...	...	@@ -19,6 +19,7 @@
19	19	<c:param name="title" value="사이트관리"/>
20	20	</c:import>
21	21
	22	+<script src="${M_JS}/util.js"/>
22	23	<script src="<c:url value="/validator.do"/>"></script>
23	24	<validator:javascript formName="siteManageVO" staticJavascript="false" cdata="false"/>
24	25
...	...	@@ -168,6 +169,35 @@
168	169	$('#brwsrSj').val(nm);
169	170	}
170	171
	172	+
	173	+$(document).on('change', 'input[type=file]', function (e) {
	174	+
	175	+ var maxSize = 1024 * 1024 * 1024;
	176	+ var fileSize = this.files[0].size;
	177	+
	178	+ if(fileSize > maxSize){
	179	+ alert("첨부파일 사이즈는 1GB 이내로 등록 가능합니다.");
	180	+ $(this).val('');
	181	+ return false;
	182	+ }
	183	+
	184	+ //썸네일 이미지
	185	+ if(validImgFile($(this))){
	186	+ setImgFileThumbnail(e.target.files[0],$(this));
	187	+ }
	188	+
	189	+});
	190	+
	191	+function delImgFile(target){
	192	+
	193	+ var form = $('#siteManageVO');
	194	+ var fileInputNm = $(target).parents('.file-add-area').find('.file-custom').find('input[type="file"]').attr('id');
	195	+ $(target).parents('.file-add-area').find('.file-custom').find('img').remove();
	196	+ $(target).parents('.file-add-area').find('.file-custom').find('input[type="file"]').val("");
	197	+ $(target).parents('.file-add-area').find('.item-area').remove();
	198	+ form.find('input[name="'+fileInputNm+'Nm"]').val('');
	199	+}
	200	+
171	201	</script>
172	202
173	203
...	...	@@ -192,6 +222,10 @@
192	222	<input name="pageIndex" type="hidden" value="<c:out value='${searchVO.pageIndex}'/>"/>
193	223	<input name="searchCondition" type="hidden" value="<c:out value="${searchVO.searchCondition}"/>"/>
194	224	<input name="searchKeyword" type="hidden" value="<c:out value="${searchVO.searchKeyword}"/>"/>
	225	+ <input name="upendLogoFileNm" type="hidden" value="<c:out value="${siteManageVO.upendLogoFileNm}"/>"/>
	226	+ <input name="lptLogoFileNm" type="hidden" value="<c:out value="${siteManageVO.lptLogoFileNm}"/>"/>
	227	+ <input name="peprsntImageFileNm" type="hidden" value="<c:out value="${siteManageVO.peprsntImageFileNm}"/>"/>
	228	+ <input name="sloganFileNm" type="hidden" value="<c:out value="${siteManageVO.sloganFileNm}"/>"/>
195	229
196	230	<fieldset>
197	231	<legend class="hdn">사이트 입력 폼</legend>
...	...	@@ -259,11 +293,11 @@
259	293	</td>
260	294	</tr>
261	295	<tr>
262		- <th><label for="upendLogoFileIdFile">상단로고</label></th>
	296	+ <th><label for="upendLogoFile">상단로고</label></th>
263	297	<td>
264	298	<div class="file-add-area">
265	299	<div class="file-custom">
266		- <input type="file" name="upendLogoFileIdFile" id="upendLogoFileIdFile" class="input-file" title="상단로고파일"/>
	300	+ <input type="file" name="upendLogoFile" id="upendLogoFile" class="input-file" title="상단로고파일"/>
267	301	<div class="preview-area">
268	302	<c:if test="${not empty siteManageVO.upendLogoFileNm}">
269	303	<img src="${SiteFileStoreWebPath}${siteManageVO.siteId}/${siteManageVO.upendLogoFileNm}"/>
...	...	@@ -275,7 +309,7 @@
275	309	<div class="item-area">
276	310	<div class="item">
277	311	<p class="txt"><c:out value="${siteManageVO.upendLogoFileNm}"/></p>
278		- <button type="button" class="ico-sm-close btn-del"><span class="txt-hide">삭제</span></button>
	312	+ <button type="button" class="ico-sm-close btn-del" onclick="delImgFile(this)"><span class="txt-hide">삭제</span></button>
279	313	</div>
280	314	</div>
281	315	</c:if>
...	...	@@ -283,11 +317,11 @@
283	317	</td>
284	318	</tr>
285	319	<tr>
286		- <th><label for="lptLogoFileId">하단로고</label></th>
	320	+ <th><label for="lptLogoFile">하단로고</label></th>
287	321	<td>
288	322	<div class="file-add-area">
289	323	<div class="file-custom">
290		- <input type="file" name="lptLogoFileId" id="lptLogoFileId" class="input-file" title="하단로고파일"/>
	324	+ <input type="file" name="lptLogoFile" id="lptLogoFile" class="input-file" title="하단로고파일"/>
291	325	<div class="preview-area">
292	326	<c:if test="${not empty siteManageVO.lptLogoFileNm}">
293	327	<img src="${SiteFileStoreWebPath}${siteManageVO.siteId}/${siteManageVO.lptLogoFileNm}"/>
...	...	@@ -299,7 +333,7 @@
299	333	<div class="item-area">
300	334	<div class="item">
301	335	<p class="txt"><c:out value="${siteManageVO.lptLogoFileNm}"/></p>
302		- <button type="button" class="ico-sm-close btn-del"><span class="txt-hide">삭제</span></button>
	336	+ <button type="button" class="ico-sm-close btn-del" onclick="delImgFile(this)"><span class="txt-hide">삭제</span></button>
303	337	</div>
304	338	</div>
305	339	</c:if>
...	...	@@ -323,7 +357,7 @@
323	357	<div class="item-area">
324	358	<div class="item">
325	359	<p class="txt"><c:out value="${siteManageVO.peprsntImageFileNm}"/></p>
326		- <button type="button" class="ico-sm-close btn-del"><span class="txt-hide">삭제</span></button>
	360	+ <button type="button" class="ico-sm-close btn-del" onclick="delImgFile(this)"><span class="txt-hide">삭제</span></button>
327	361	</div>
328	362	</div>
329	363	</c:if>
...	...	@@ -347,7 +381,7 @@
347	381	<div class="item-area">
348	382	<div class="item">
349	383	<p class="txt"><c:out value="${siteManageVO.sloganFileNm}"/></p>
350		- <button type="button" class="ico-sm-close btn-del"><span class="txt-hide">삭제</span></button>
	384	+ <button type="button" class="ico-sm-close btn-del" onclick="delImgFile(this)"><span class="txt-hide">삭제</span></button>
351	385	</div>
352	386	</div>
353	387	</c:if>

236a80f

base/src/main/webapp/resources/manage/js/util.js (added)

+++ base/src/main/webapp/resources/manage/js/util.js

...	...	@@ -0,0 +1,38 @@
	1	+function setImgFileThumbnail(file,target) {
	2	+ var fileNm = file.name;
	3	+ var filesize = Math.round(file.size / 1024) + "KB";
	4	+ var reader = new FileReader();
	5	+
	6	+ reader.onload = function (e) {
	7	+ var img = document.createElement("img");
	8	+ img.setAttribute("src", e.target.result);
	9	+ target.parent().find('.preview-area').children('img').remove();
	10	+ target.parent().find('.preview-area').html(img);
	11	+ };
	12	+
	13	+ reader.readAsDataURL(file);
	14	+ if(target.parents('.file-add-area').find('.item-area').length < 1){
	15	+ var html = '<div class="item-area">\n' +
	16	+ '\t\t\t\t\t\t\t\t\t\t<div class="item">\n' +
	17	+ '\t\t\t\t\t\t\t\t\t\t\t<p class="txt">'+fileNm+'</p>\n' +
	18	+ '\t\t\t\t\t\t\t\t\t\t\t<button type="button" class="ico-sm-close btn-del" onclick="delImgFile(this)"><span class="txt-hide">삭제</span></button>\n' +
	19	+ '\t\t\t\t\t\t\t\t\t\t</div>\n' +
	20	+ '\t\t\t\t\t\t\t\t\t</div>'
	21	+ target.parents('.file-add-area').append(html);
	22	+ }else{
	23	+ target.parents('.file-add-area').find('.item-area .item .txt').text(fileNm);
	24	+ }
	25	+}
	26	+
	27	+function validImgFile(file){
	28	+ var ext = file.val().split('.').pop().toLowerCase();
	29	+
	30	+ if($.inArray(ext, ['png','jpg','jpeg','svg','gif']) == -1) {
	31	+ alert('이미지 파일만 등록가능합니다.');
	32	+ file.val("");
	33	+ return false;
	34	+ }
	35	+ return true;
	36	+}
	37	+
	38	+

Add a comment

Open 0
Closed 0

List

Delete comment