나의 생각을 끄적이는 공간

[Vue]비주얼 스튜디오 코드 - 자주 사용하는 확장프로그램 설치

Wooni0477 — Fri, 24 Feb 2023 12:27:06 +0900

비주얼 스튜디오 코드 - 자주 사용하는 확장프로그램 설치

1. Night Owl

Vs Code의 유용한 테마가 많다.

※테마 변경방법

1)F1을 누른후 theme를 검색한다.

2)Preferences : Color Theme를 선택후 엔터

3)원하는 테마를 선택한다.

2.Vue Vetor

코드 하이라이팅을 해준다.

하이라이팅 된 코드

3.Live Server

실시간으로 반영 할 수 있다.

※실시간 라이브 서버 실행방법

-원하는 페이지에서 오른쪽마우스 클릭하고 Open with Live Server를 클릭

-값을 수정하면 바로 입력되는것을 확인 할 수 있다.

[IntelliJ] 타임리프 빨간줄 없애는 법

Wooni0477 — Thu, 23 Feb 2023 11:06:03 +0900

타임리프 빨간줄 없애는 법

타임리프 정상적(?)인 문법

문법은 정상인데 계속 빨간줄이 떠서 불편하였다.

고치는법은 단순하였다.

타임리프 주소에서 www를 제거해주면 된다.

짜잔! 빨간줄이 사라졌다!

버추얼박스(virtualbox) 리눅스 sftp 세팅 및 파일질러 연결하기

Wooni0477 — Thu, 2 Feb 2023 15:52:51 +0900

버추얼박스(virtualbox)에 리눅스(ubuntu)를 생성하여

sftp 서버를 설치한다음

파일질러와 연결을 해보자.

1. 구성환경

-윈도우10

-우분투(5.15.0-58-generic)

-virtualBox(6.1)(최신버전은 환경설정에 네트워크가 없어서 이전버전으로 사용함)

-파일질러(윈도우 ftp 사용툴)

2. 다운로드 사이트

-우분투(ubuntu)

가장 최신버전으로 받으면 된다.

2023년 2월 2일기준 22.04.1 LTS 버전이다.

https://ubuntu.com/download/desktop

Download Ubuntu Desktop | Download | Ubuntu

Ubuntu is an open source software operating system that runs from the desktop, to the cloud, to all your internet connected things.

ubuntu.com

우분투 그림1

-파일질러

요것도 가장 최신으로 받아도 상관없다.

https://filezilla-project.org/

파일질러 그림1

파일질러 그림2

-버추얼박스(virtual Box)

최신버전은 환경설정에 네트워크가 없어서 6.1 버전으로 사용했다.

https://www.virtualbox.org/wiki/Download_Old_Builds_6_1

Download_Old_Builds_6_1 – Oracle VM VirtualBox

www.virtualbox.org

버추얼박스 그림1

3. 이론

전체적인 환경 구조 그림1

윈도우에서 127.0.0.1, 105포트로 접속요청을하면

버추얼박스에서 포트포워딩을 거쳐

우분투에 접속이 가능하게 해준다.

실제로 해야할 일은 접속요청과 포트포워딩만 해주면 된다.

4. 적용

-우분투(ubuntu) ip 설정

우분투 네트워크 설정 그림1

1) 우분투에 접속후, 우측상단 표시클릭후, 설정 클릭한다.

우분투 네트워크 설정 그림2

2)네트워크 탭에서 톱니바퀴모양을 클릭한다.

우분투 네트워크 설정 그림3

3) IPv4탭에서 방식을 수동으로 바꿔주고, 그림과 같이 아이피 주소를 변경해준다.

주소 네트마스크 게이트웨이
10.100.0.105 255.255.255.0 10.100.0.1

우분투 네트워크 설정 그림4

4) 자세히보기 탭을 클릭하여 정상적으로 변경됬는지 확인한다!! (안되어있으면 재부팅!)

-포트포워딩

버추얼박스 적용 그림1

1) 버추얼박스 실행후

환경설정 -> 네트워크 -> 네트워크 추가를 누른다.

버추얼박스 적용 그림2

2) 새로만든 네트워크를 오른쪽버튼 클릭후, NAT 네트워크 편집을 누른다.

버추얼박스 적용 그림3

3) 포트포워딩을 클릭한다.

버추얼박스 적용 그림4

4)다음 그림과 같이 입력한후 확인을 누른다.

이름 프로토콜 호스트IP 호스트 포트 게스트IP 게스트포트
test1 TCP 127.0.01 105 10.100.0.105 22

버추얼박스 적용 그림5

5)네트워크 CIDR도 다음 그림과 같이 입력해주고 확인 누른다. 포트포워딩 세팅끝!

10.100.0.0/24

파일질러 접속 요청 확인

파일질러 접속 요청 그림1

1)다음 그림과 같이 입력후 연결 클릭한다.

※우분투에 sftp용 사용자(user1)를 미리 만들어야한다.

파일질러 접속 요청 그림2

2) 정상적으로 연결 되었다!!! 끝

[이클립스]Web Deployment Assembly 경로값들이 계속 초기화 될경우

Wooni0477 — Wed, 1 Feb 2023 15:05:29 +0900

[이클립스]Web Deployment Assembly 경로값들이 계속 초기화 될경우

증상

이클립스 설정 -> Web Deployment Assembly -> Add를 눌러 경로를 추가를 해도 초기화 되는 증상

원인

org.eclipse.wst.common.component 파일이 없거나 설정이 필요하다.

해결방법

.settings -> org.eclipse.wst.common.component 파일 내용을 다음과 같이 변경한다.

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<project-modules id="moduleCoreId" project-version="1.5.0">
    <wb-module deploy-name="SpringNoticeBoard">
        <wb-resource deploy-path="/" source-path="/target/m2e-wtp/web-resources"/>
        <wb-resource deploy-path="/" source-path="/src/main/webapp" tag="defaultRootSource"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/resources"/>
        <property name="java-output-path" value="target/classes"/>
        <property name="context-root" value="board"/>
    </wb-module>
</project-modules>
Colored by Color Scripter
cs

결과

자동으로 폴더 경로가 삽입된다!!

인텔리제이(IntelliJ) 인코딩 설정법

Wooni0477 — Wed, 16 Mar 2022 12:09:37 +0900

인텔리제이(IntelliJ) 인코딩 설정법

vm 인코딩설정

1. 설치된 경로 이동

C:\Program Files\JetBrains\IntelliJ IDEA 2021.3.2\bin

2. idea64.exe.vmoptions파일을 메모장으로 실행

3. 맨 끝에 한줄 추가

-Dfile.encoding=UTF-8

editor 파일 설정

1. 파일>설정

2. 에디터>파일 인코딩

UTF-8 체크하기

tomcat 인코딩 설정

1. 실행>설정 편집

2. Server 텝

VM options에

-Dfile.encoding=UTF-8

입력

putty & ssh 터널링을 이용해서 DB 연결 해보자(외부서버,내부서버)

Wooni0477 — Thu, 19 Aug 2021 21:30:25 +0900

회사생활을 좀더 쉽게하기 위해 나만의 설정법을 적어둡니다.

어디까지나 참고용으로 사용하시길 바랍니다.

· 구성환경

로컬 컴퓨터 : 윈도우10

서버1 : centOS

서버2 : centOS

· 필요 유틸

Putty

· 전반적인 환경

그림1

· 터널링을 하는이유

그림1 환경은 DB서버의 3306포트를 접근하기 위해서는 오직 일반서버에서 접근 할 수 밖에 없다.

사용자컴퓨터에서 다이렉트로 DB서버를 접근 할 수 없다.

할수 있는 방법은 일번서버를 원격접속하고, 일반서버에서 또 DB서버를 원격접속하여 DB를 접근 할 수 밖에 없다.

이렇게 고생하는 이유는 고객이 DB서버에서 포트를 열어주지 않는것이다.

회사생활하면서 고객이 포트를 열어주지 않는 경우는 비일비재하다.

개발을 하기 위해 sql툴을 사용해야 되는데 여간 연결하기 힘들다.

그래서 putty의 기능 중 터널링기술과 ssh를 사용하여 sql툴 연결해보자

(p.s. 야근을 하는중에 글 작성한다.....그림이 개판이더라도 이해바란다.)

(p.s2. 야근이 아니더라도 그림 못그린다. 나도 잘그리고 싶다)

· 이론

▶ 그림1에서 ①구간

putty를 이용해서 사용자컴퓨터와 일반서버사이의 터널링을 구축한다.

사진2

▶ 그림1에서 ②구간

ssh를 이용해서 일반서버와 DB서버사이의 터널링을 구축한다.

사진3

· 실전

▶ 그림1에서 ①구간 구축

1.putty session 설정

host 주소를 일반서버주소

포트는 22번 포트(ssh) 설정

구축1-1

2. putty ssh - tunnel 설정

ssh-tunnels 메뉴로 이동 후

다음 값을 입력한다.

입력을 다하면 Add를 누른다.

그러면 다음 그림과 같이 한줄이 추가된다.

Source port : 2000
Destination : 127.0.0.1:3000

구축1-2

3. Open을 눌러 일반서버 연결

▶ 그림1에서 2구간

1. ssh 명령어 입력

ssh -L 3000:192.168.0.20:3306 root@192.168.0.20

(ssh -L 일반서버(local)포트:DBIP:db포트 root@DBIP)

구축2-1

2. 연결 완료

구축2-2

3. 포트확인, 일반서버를 실행후(db서버아님) 명령어로 포트확인

netstat -nap | grep 3000

구축2-3

· sql 툴 연결 확인

server host는 localhost로 적어야 된다. (이유는 대충 알것 같지만 확실치 않아 아시는분 댓글 부탁드려요)

구축 3-1

구축3-2

로그 분석기 툴(모니터링) bareTail

Wooni0477 — Tue, 28 Apr 2020 14:49:16 +0900

로그 분석기 툴 bareTail

환경

window 버전 툴

활용

- 리눅스의 tail과 비슷

(텍스트파일 변경시 -> 툴에서도 자동변경)

- highLight 기능

- UTF-8, ANSI, ASCII, UNICODE...등 지원

- 노설치

무료 다운로드

https://www.baremetalsoft.com/baretail/

윈도우 환경에서 나름 좋은 로그 모니터링 툴이다.

나중에도 쓸거 같아서 적어둔다.

jquery - datepicker를 사용하여 날짜 기간 정하기

Wooni0477 — Fri, 27 Mar 2020 11:24:04 +0900

jquery - datepicker를 사용하여 날짜 기간 정하기

구성환경

jquery 3.4.1
jquery-ui 1.12.1

jquery ui css 다운

https://jqueryui.com/download/

위 사이트로 들어가서 전부 체크 해제 한후

datepicker만 선택 후 다운로드

jquery ui 참고

https://jqueryui.com/datepicker/#default

https://its-easy.tistory.com/12

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        
$(function() {
        fn_default_datepicker();
});
        
function fn_default_datepicker()
{
    var start = $( "#datepicker_start" ).datepicker({
        dateFormat: 'yy-mm-dd' //Input Display Format 변경
        ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
        ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
        ,changeYear: true //콤보박스에서 년 선택 가능
        ,changeMonth: true //콤보박스에서 월 선택 가능                
        //,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
        //,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
        //,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
        ,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트                
        ,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
        ,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
        ,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
        ,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
        ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
        ,minDate: "-6M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
        ,maxDate: "0M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)                
    });
        
    var end = $( "#datepicker_end" ).datepicker({
        dateFormat: 'yy-mm-dd' //Input Display Format 변경
        ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
        ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
        ,changeYear: true //콤보박스에서 년 선택 가능
        ,changeMonth: true //콤보박스에서 월 선택 가능                
        //,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
        //,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
        //,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
        ,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트                
        ,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
        ,monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 텍스트
        ,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
        ,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
        ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
        ,minDate: "-6M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
        ,maxDate: "0M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
           ,defaultDate: "+1w"
      });
    
    //초기값을 오늘 날짜로 설정
    $('#datepicker_start').datepicker('setDate', '-7D'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
    $('#datepicker_end').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
}
 
function getDate( element ) {
    var date;
    var dateFormat = "yy-mm-dd";
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }
    return date;
 }
 
    </script>
</head>
<body>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <label>시작일</label>
        </div>
        <div class="ui-block-b">
            <label>마지막일</label>
        </div>
        <div class="ui-block-c">
        </div>
    </div>
    <div class="ui-grid-b">
        <div class="ui-block-a">
            <input type="text" id="datepicker_start" readonly="readonly">
        </div>
        <div class="ui-block-b">
            <input type="text" id="datepicker_end" readonly="readonly">
        </div>
        <div class="ui-block-c">
            <button id="date_search">날짜검색</button>
        </div>
    </div>
    
<script>
 
    
$(document).ready(function(){
    
    $("#datepicker_start").on("click",function(){
        
    });
 
     $("#datepicker_start").on("change",function(e){
         var end = $( "#datepicker_end" ).datepicker( "option", "minDate", getDate( e.target ) );
     });
     
     $("#datepicker_end").on("change",function(e){
         
     });
     
     $("#date_search").on("click",function(){
         var start = $("#datepicker_start").val();
         var end = $("#datepicker_end").val();
     });    
});
 
</script>
</body>
</html>
Colored by Color Scripter
cs

소스 결과

오늘이 27일 이니까

시작일을 11일로 잡으면

마지막일은 11~27일까지 밖에 잡지 못한다.

끝

JODConverter - JAVA에서 OpenOffice로 엑셀(excel)을 PDF로 변환하기

Wooni0477 — Tue, 24 Mar 2020 11:08:35 +0900

JODConverter - JAVA에서 OpenOffice로 엑셀(excel)을 PDF로 변환하기

구성환경

-JAVA 1.8

-JODConverter 3.0 beta

-OpenOffice 3.3.0

-CentOS 6.7(64bit)

JODConverter 다운 사이트

https://code.google.com/archive/p/jodconverter/downloads

OpenOffice 다운 사이트

http://www.openoffice.org/download/index.html

리눅스(CentOS)버전 다운로드 방법

버전은 3.4.1 밖에 없지만, 아카이브를 들어가기위해 선택해준다.

영어 버전으로 들어가고

3.3.0/ 들어가서

tar.gz파일을 받아준다.

리눅스(CentOS) OpenOffice 설치

※폴더구성

1. #tar -zxvf OOo_3.3.0_Linux_x86-64_install-rpm-wJRE_en-US.tar.gz

-압축을 풀어준다.

2. #cd RPMS

-압축푼 폴더에서 RPMS 폴더로 이동

3. #rpm -Uvh *.rpm

- rpm 설치

4. #cd desktop-integration

-압축푼 폴더에서 RPMS/desktop-integration 폴더로 이동

5. #rpm -Uvh openoffice.org3.3-redhat-menus-3.3-9556.noarch.rpm

-자신의 OS에 맞게 RPM을 설치 해준다.

(centOS -> redhat)

※리눅스(CentOS) 한글설정

#export LC_ALL="ko_KR.UTF-8"

또는

#export LANG="ko_KR.UTF-8"

두 명령어 입력 후 다음과 같이 나오면 설정 완료

#locale
LANG=ko_KR.UTF-8
LC_CTYPE="ko_KR.UTF-8"
LC_NUMERIC="ko_KR.UTF-8"
LC_TIME="ko_KR.UTF-8"
LC_COLLATE="ko_KR.UTF-8"
LC_MONETARY="ko_KR.UTF-8"
LC_MESSAGES="ko_KR.UTF-8"
LC_PAPER="ko_KR.UTF-8"
LC_NAME="ko_KR.UTF-8"
LC_ADDRESS="ko_KR.UTF-8"
LC_TELEPHONE="ko_KR.UTF-8"
LC_MEASUREMENT="ko_KR.UTF-8"
LC_IDENTIFICATION="ko_KR.UTF-8"
LC_ALL=ko_KR.UTF-8

만약 재부팅 후에도 설정이 지속될려면 .bash_profile 에 명령어를 넣어두면된다.

#vi .bash_profile

#export LC_ALL="ko_KR.UTF-8" 맨 끝줄에 넣어줌

#:wq 저장

OpenOffice 서비스 시작

//서비스 시작

#soffice -headless -accept="socket,host=localhost,port=8100;urp;" -nofirststartwizard&

//프로세스 확인

#ps -ef | grep openoffice

//실행중인 화면

※실행이 안된다면 RPMS/desktop-integration 폴더에서 rpm을 설치 했는지 다시 한번 확인

-2020.4.10 추가

설치된 경로를 참조하는지 굳이 서비스에 안올려도 동작이 된다.

-2020.4.13 추가

최근 새로 centos7 깔고 openoffice4.1.7 로 바꾸었더니 한글이 네모(깨지는) 증상이 나타났다.

-2020.4.24 추가

한글이 네모(깨지는) 증상이 나타난 이유를 알았다. 리눅스를 새로깔았더니 font(ttf파일)이 없었던것이다.(이런 실수를!!)

아래 폴더에 엑셀에서 사용한 폰트를 넣어주니 한글이 잘나왔다.

이쪽 경로로 넣어주면 된다 #cd /opt/openoffice4/share/fonts/truetype

-2020.06.17 추가

실치후 실행이 안된다면 아래의 3개의 라이브러리를 설치 해보면 실행이 된다.

(라이브러리 확인방법 #ldd /opt/openoffice4/program/soffice.bin)

yum install libXrender.x86_64
yum install libXext.x86_64
yum install libXt.x86_64

자바에서 테스트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import java.io.File;
 
import org.artofsolving.jodconverter.OfficeDocumentConverter;
import org.artofsolving.jodconverter.document.DefaultDocumentFormatRegistry;
import org.artofsolving.jodconverter.document.DocumentFormatRegistry;
import org.artofsolving.jodconverter.office.DefaultOfficeManagerConfiguration;
import org.artofsolving.jodconverter.office.OfficeManager;
 
public class convert_test {
    public static void main(String[] args) {
        File inputFile = new File("/home/test/template.xlsx");    //실제 엑셀파일 위치
        File outputFile = new File("/home/test/template.pdf"); //저장할 PDF파일 위치
        DefaultOfficeManagerConfiguration configuration = new DefaultOfficeManagerConfiguration();
 
        configuration.setPortNumber(8100); //포트설정
        configuration.setOfficeHome(new File("/opt/openoffice.org3")); //OpenOffice 설치된 경로
 
        OfficeManager officeManager = configuration.buildOfficeManager();
        officeManager.start();
        DocumentFormatRegistry formatRegistry = new DefaultDocumentFormatRegistry();
        OfficeDocumentConverter converter = new OfficeDocumentConverter(officeManager, formatRegistry);
        
        try {
             converter.convert(inputFile, outputFile);
        } catch (Exception e){
            e.printStackTrace();
        } finally {
            officeManager.stop();
        }
    }
}
Colored by Color Scripter

cs

※윈도우에서 사용할때는

1. OpenOffice Windows 버전 설치

2. 소스에서 파일 경로와 OpenOffice 설치경로만 바꿔주면 된다.

3. 단, 경로설정은 /(슬래시)로 구분해야 인식이 되었다.

4. 만약 안될시, 포트를 2002로 바꾸면 되는경우도 있었다.

자료가 생각보다 많이없어서 정리해둔다.

피드백은 언제든지 환영입니다~!

ajax으로 file upload를 해보자 & 첨부파일 이미지 미리보기

Wooni0477 — Mon, 9 Mar 2020 14:35:49 +0900

1. form을 사용하지않고 따로 ajax으로 upload를 해보자

2. 첨부파일 이미지 미리보기

form.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<div>
    <label for="file1">파일</label> 
    <input type="file" id="file1" name="file1"> 
    <button id="btn_submit" onclick="javascript:fn_submit()">전송</button>    
</div>
 
<div>
       <div class="img_wrap">
           <img id="img" />
       </div>
</div>
 
<script type="text/javascript">
    //이미지 미리보기
    var sel_file;
 
    $(document).ready(function() {
        $("#file1").on("change", handleImgFileSelect);
    });
 
    function handleImgFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
 
        var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/;
 
        filesArr.forEach(function(f) {
            if (!f.type.match(reg)) {
                alert("확장자는 이미지 확장자만 가능합니다.");
                return;
            }
 
            sel_file = f;
 
            var reader = new FileReader();
            reader.onload = function(e) {
                $("#img").attr("src", e.target.result);
            }
            reader.readAsDataURL(f);
        });
    }
</script>
    
<script>
//파일 업로드
function fn_submit(){
        
        var form = new FormData();
        form.append( "file1", $("#file1")[0].files[0] );
        
         jQuery.ajax({
             url : "/myapp/result"
           , type : "POST"
           , processData : false
           , contentType : false
           , data : form
           , success:function(response) {
               alert("성공하였습니다.");
               console.log(response);
           }
           ,error: function (jqXHR) 
           { 
               alert(jqXHR.responseText); 
           }
       });
}
</script>
</body>
</html>
Colored by Color Scripter
cs

controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
package com.bitcamp.myapp;
 
import java.io.File;
import java.util.Calendar;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
 
@Controller
public class UploadForm {
    
    private String path="C:\\myfolder\\01_project";
    
    @RequestMapping("/form")
    public String form()
    {
        return "form";
    }
    
    @RequestMapping("/result")
    public String result(@RequestParam("file1") MultipartFile multi,HttpServletRequest request,HttpServletResponse response, Model model)
    {
        String url = null;
        
        try {
 
            //String uploadpath = request.getServletContext().getRealPath(path);
            String uploadpath = path;
            String originFilename = multi.getOriginalFilename();
            String extName = originFilename.substring(originFilename.lastIndexOf("."),originFilename.length());
            long size = multi.getSize();
            String saveFileName = genSaveFileName(extName);
            
            System.out.println("uploadpath : " + uploadpath);
            
            System.out.println("originFilename : " + originFilename);
            System.out.println("extensionName : " + extName);
            System.out.println("size : " + size);
            System.out.println("saveFileName : " + saveFileName);
            
            if(!multi.isEmpty())
            {
                File file = new File(uploadpath, multi.getOriginalFilename());
                multi.transferTo(file);
                
                model.addAttribute("filename", multi.getOriginalFilename());
                model.addAttribute("uploadPath", file.getAbsolutePath());
                
                return "filelist";
            }
        }catch(Exception e)
        {
            System.out.println(e);
        }
        return "redirect:form";
    }
    
    // 현재 시간을 기준으로 파일 이름 생성
    private String genSaveFileName(String extName) {
        String fileName = "";
        
        Calendar calendar = Calendar.getInstance();
        fileName += calendar.get(Calendar.YEAR);
        fileName += calendar.get(Calendar.MONTH);
        fileName += calendar.get(Calendar.DATE);
        fileName += calendar.get(Calendar.HOUR);
        fileName += calendar.get(Calendar.MINUTE);
        fileName += calendar.get(Calendar.SECOND);
        fileName += calendar.get(Calendar.MILLISECOND);
        fileName += extName;
        
        return fileName;
    }
}
 
Colored by Color Scripter
cs

servlet-context.xml

1
2
3
4
5
6
<beans:bean name="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <beans:property name="maxUploadSize" value="10000000"></beans:property> //업로드 사이즈 제한
        <beans:property name="maxInMemorySize" value="100000"></beans:property> //메모리 최대 사이즈 제한
        <beans:property name="uploadTempDir" value="temp"></beans:property>
        <beans:property name="defaultEncoding" value="utf-8"></beans:property>
</beans:bean>
Colored by Color Scripter
cs