commons-fileupload 라이브러리를 통한 파일 업로드를 구현하기 위해서는 라브러리를 다운받아 lib폴더에 넣어주어야 한다.


commons-fileupload-버젼.jar    ( 주소 : http://commons.apache.org/proper/commons-fileupload/ )

commons-id-버젼.jar               ( 주소 : http://commons.apache.org/proper/commons-io/ )



1. 입력 폼 만들기

1
2
3
4
5
6
<form id="go_form" name="go_form" method="post" enctype="multipart/form-data" action="img-upload.jsp">
    이름<input type="text" placeholder="이름을 입력하세요" name="user_name" maxlength="20" id="user_name">
    파일<input type="file" id="user_img" name="user_img">
    <button type="button" id="delFile" onclick="del_file()">파일 삭제</button>
    <button type="submit">submit</button>
</form>
cs

- 입력폼의 method를 POST로 지정하고, enctype 속성의 값을 multipart/form-data로 설정한다.

  사진, 동영상 등 글자가 아닌 파일은 모두 Multipart 형식의 데이터이다. 따라서 파일 업로드 시 enctype 설정을 꼭 해야한다.

- 파일 업로드와 함께 텍스트 형식의 폼 데이터도 함께 전송한다.

- 파일 삭제 버튼을 누르면 업로드했던 파일이 삭제된다.


2. img-upload.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
<%
    // request로 들어온 데이터 저장할 변수 선언
    Map<StringString> user = new HashMap<StringString>();
 
    // 이미지는 서버에 저장
    String saveDir = application.getRealPath("/image/"); // 저장할 경로 지정
 
    // 유효한 request인지 확인
    boolean isMultipart = FileUpload.isMultipartContent(request);
    String fileName = ""// 업로드한 파일의 이름을 저장할 변수 설정
 
    try {
        if(isMultipart) {
            DiskFileItemFactory factory = new DiskFileItemFactory();
 
            // 파일 업로드 핸들러 생성
            ServletFileUpload upload = new ServletFileUpload(factory);
 
            // 한글 인코딩
            upload.setHeaderEncoding("UTF-8");
 
            // request parsing
            List<FileItem> items = upload.parseRequest(request);
            Iterator<FileItem> iter = items.iterator();
            while (iter.hasNext()) {
                FileItem item = iter.next();
 
                // 한글 인코딩
                item.getString("UTF-8");
 
                if (item.isFormField()) {
                    // file 형식이 아닐 때
                    String name = item.getFieldName(); // 필드 이름
                    String value = new String((item.getString()).getBytes("8859_1"),"utf-8"); // 필드 값, 한글 인코딩
                    user.put(name,value);
                } else {
                    // file 형식일 때
                    fileName = new File(item.getName()).getName();
                    File storeFile = new File(saveDir + "/"  + fileName);
                    user.put("user_img",fileName);
                    // saves the file on disk
                    item.write(storeFile);
                }
            }
        }
    }
    catch ( Exception e ) { System.out.println(e); }
%>
cs

- ServletFileUpload.isMultipartContent(request) : 전송된 데이터가 multipart/form-data형식으로 전송되었는지 여부 확인

- multipart/form-data 형식으로 넘어온 경우 기존의 request.getParameter("name") 방식으로 값을 꺼낼 수 없기때문에 위의 방법 사용

- FileItem 클래스는 multipart/form-data로 전송된 파라미터 또는 파일 정보를 저장하고 있는 클래스이다.



FileItem 클래스가 제공하는 메소드


메소드 

리턴타입 

설명 

isFormField() 

boolean 

파일이 아닌 일반적인 입력 파라미터일 경우  true를 리턴한다.

getFieldName()

String 

파라미터 이름을 구한다. 

getString()

String 

기본 캐릭터 셋을 사용하여 파라미터의 값을 구한다. 

getString(String encoding) 

String 

지정한 인코딩을 사용하여 파라미터의 값을 구한다.

getName() 

String 

업로드한 파일의 (경로를 제외한) 이름을 구한다.

getSize() 

long 

업로드한 파일의 크기를 구한다. 

write(File file) 

void 

업로드한 파일을 file이 나타내는 파일로 저장한다. 

getInputStream()

inputStream

업로드한 파일을 읽어오는 입력 스트림을 리턴한다.

get()

byte[]

업로드한 파일을 byte배열로 구한다.

isInMemory

boolean

업로드한 파일이 메모리에 저장된 상태인 경우 true를 리턴하고, 임시 디렉터리에 파일로 저장된 경우 false를 리턴한다. 

delete()

void

파일과 관련된 자원을 제거한다. 메모리에 저장된 경우 할당된 메모리를 반환하고 임시 파일로 저장된 경우 파일을 삭제한다.





참고 - https://m.blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220056175936&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

a태그를 href가 아닌 onclick()을 사용하고자 할 때 방법 두 가지를 소개한다.


1. href를 막고 onclick 사용

<a href="javacsript:void(0); onclick='함수명(매개변수)'>a링크입니다</a>

href가 동작은 하지만 void(0)으로 사실상 동작을 안 하는 것처럼 보이고 onclick이 실행된다.



2. href에 경로설정을 하지 않고 onclick 속성 사용

<a href="#" onclick="함수명(매개변수);">a링크</a>

이런 형식으로 사용한다.


<a href="aaa.jsp" onclick="return 함수명(매개변수);">a링크</a>

이렇게 사용하는 경우, href에 설정한 경로로 이동하는 것보다 onclick이벤트가 먼저 실행된다. onclick 이벤트의 리턴값이 true이면 href로 연결된 링크로 이동하고, false이면 이동하지 않는다.




출처 - http://egloos.zum.com/pdw213/v/3493140

출처 - http://0taeng.tistory.com/31

HTML 상에서 특수문자가 제대로 나타나지 않을 수 있기 때문에 아래 문자들을 사용합니다.

표현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음

&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

&#162;

&cent;

센트 기호

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

&#165;

&yen;

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

&#171;

&laquo;

왼쪽 꺾인 괄호

&#172;

&not;

부정

­

&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark


'' 카테고리의 다른 글

[commons-fileupload]파일 업로드  (0) 2018.07.02
[html]a태그 onclick 사용하기  (0) 2018.06.29
[ASCII]아스키코드의 인코딩 값(펌글)  (0) 2018.06.28
[보안]xss와 sql injection  (0) 2018.06.15
[web server / was]아파치와 톰캣  (0) 2018.06.07

+ Recent posts