레파캣 레파캣

파일을 업로드 한 뒤에는 이를 다운받을 수 있는 링크를 제공하고 서버에서는 링크를 통한 다운로드 요청에 대해 처리를 해줘야 한다. 클라이언트에서는 아래와 같은 코드를 넣어서 다운로드 링크를 만들 수 있다. 의 src 에 displayFile 이라는 요청을 보내게 설정된 코드이다. 물음표 이후로 파일정보에 대한 query string 이 들어간다. 12345678910111213141516171819202122232425262728293031 $.ajax({ url: '/uploadAjax', data: formData, dataType: 'text', processData: false, contentType: false, //contentType: 'multipart/form-data', type: 'P..

이나 Ajax 방식으로 클라이언트에서 서버로 파일을 전송하는 방법을 살펴봤다. 이를 서버에서 받으려면 몇가지 설정과 코드가 필요하다. 파일 업로드를 위한 라이브러리를 추가한다. pom.xml 1 2 3 4 5 commons-fileupload commons-fileupload 1.3.1 Colored by Color Scripter cs context 에 multipart 로 들어오는 데이터 처리를 위한 설정을 추가한다. 이는 servlet-context 에 추가하면 되는데, 없다면 root-context 에 추가한다. servlet-context.xml 1 2 3 4 Colored by Color Scripter cs 한글 파일 이름 처리를 위해 filter 를 추가한다. web.xml 1 2 3 4 ..

파일업로드 Ajax 방식의 핵심은 FormData 라는 브라우저에서 지원하는 클래스이다. FormData 는 과 같은 효과를 가져다주는 key/value 가 저장되는 객체이다. 태그처럼 데이터를 처리할 수 있게 해준다. 이를 XHR 에 실어서 서버에 보내면 마치 이 전송된 것과 같은 효과를 가져다 준다. IE 에서는 10 부터 지원한다고 한다. (참고) 사용자가 선택한 File 을 아래와 같이 FormData 에 추가할 수 있다. 검색해보니 좋은 예제가 있어 복사했다. (출처는 여기) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $('drag-target-selector').on('drop', function(event) { //stop the browser..

사용자로부터 입력받은 파일을 서버로 보내는 방법은 크게 두가지가 있다. 태그를 이용한 전송과 Ajax 방식이다. 방식은 태그를 이용하여 사용자로부터 파일을 선택하게 하고 form.submit() 을 통해 서버로 전송하는 방식이다. Ajax 방식은 사용자가 선택한 파일을 XMLHttpRequest 에 실어서 서버에 보내는 방식이다. 이 포스팅에서는 을 사용하는 방식을 다뤄본다. 1 2 3 4 Colored by Color Scripter cs 파일 전송을 위한 의 모양은 대략 위와 같다. 화면상에는 아래와 같이 나온다. 파일전송 form 에서 주의해서 설정해야할 attribute 는 바로 entype 이다. w3schools 에는 아래와 같이 설명이 나온다. enctype attribute 가 가질 수 있..

파일업로드를 구현하려고 할 때 가장 먼저 부딪히는 단어가 MIME 이다. MIME 는 Multipurpose Internet Mail Extension 으로 메일전송시 정보의 형태를 나타내는 규격이었는데, 현재 HTTP 프로토콜에서도 사용되고 있다. (위키) 전송하는 데이터의 형태를 "Content-Type" 이라는 헤더에 약속된 타입 값을 넣는 것으로 표현해야 한다. Form 이나 Ajax 통신시 아래와 같이 지정하는 것을 볼 수 있다. (multipart/form-data, application/json) 1 2 3 4 Colored by Color Scripter cs 1 2 3 4 5 6 7 8 $.ajax({ type : 'post', url : '/replies/', headers : { "C..