티스토리 뷰

화면단의 데이터를 백엔드로 넘기는 방법 중에서 대표적인 방법이 form 태그를 사용하는 것이다. 입력받은 데이터를 가공없이 submit만 해주면 되기 때문에 편하기도 하다. 하지만 데이터에 파일이 추가되는 경우 form 태그를 사용하기에 애매해지는 경우가 있다. 파일을 하나씩 선택하는 경우는 문제가 없는데 여러 파일을 한번에 선택하게 하는 경우이다.

 

1
2
3
4
// 파일 선택창에서 하나의 파일만 선택 가능
<input name="files" id="fileupload" type="file" />
// 파일 선택창에서 여러개의 파일을 한번에 
<input name="files" id="fileupload" type="file" multiple />

 

 

사실 여러개의 파일을 선택하는 것 까지는 크게 이상이 없다. 이 파일을 삭제하려고 할 때 문제가 발생한다. 파일은 속성이 readonly이기 때문에 추가, 변경이 불가능하다. 만약에 파일을 삭제하려고 한다면 선택적으로 삭제할 수 없고 추가했던 모든 파일을 모두 삭제해야 한다. 하지만 요구사항이 그렇게 단순하면 개발자는 참 편하겠지.....

 

FormData를 사용하여 이 문제를 해결하려고 한다. FormData에 대한 설명은 아래와 같다.

 

1
2
3
4
5
6
7
8
9
10
11
12
FormData 인터페이스는 XMLHttpRequest.send()로 쉽게 보내질 수 있는 폼 field와 
그 값들로 나타나는 key/value쌍들을 쉽게 만들 수 있는 방법을 제공한다. 
만약에 인코딩 타입이 "multipart/form-data"로 설정이 되어 있으면 폼이 사용하는 것과 같은 포맷으로 사용한다.
 
// form 태그가 있는 경우
// form 태그가 html에 있는경우(여기서는 create_form이라는 id로 세팅된 form 태그) 
// FormData 생성자 함수에 인자로 넘겨서 input 태그에 있는 데이터들을 따로 세팅하지 않아도 사용할 수 있다.
var createForm = document.getElementById("create_form");
var formData = new FormData(createForm );
 
// form 태그가 없는 경우
var formData = new FormData();
 

 

 

 

파일 태그가 있는 html 부분

 

1
2
3
4
// 파일 input 태그가 아래와 같이 선언되어 있고
<input name="files" id="fileupload" type="file" multiple />
// 추가된 파일 이름과 삭제할 수 있는 버튼이 추가 되는곳은 아래와 같이 선언되어 있다.
<div id="fileList"></div>
 

 

 

 

 

 

 

파일을 추가 삭제하는 부분의 javascript

 

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
// 파일이 추가되는 순간 addFiles 함수가 실행된다.
$(document).ready(function() {
    $("#fileupload").on("change", addFiles);
});
 
var filesTempArr = [];
// 파일 추가
function addFiles(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);
    var filesArrLen = filesArr.length;
    var filesTempArrLen = filesTempArr.length;
    forvar i=0; i<filesArrLen; i++ ) {
        filesTempArr.push(filesArr[i]);
        $("#fileList").append("<div>" + filesArr[i].name + "<img src=\"/images/deleteImage.png\" onclick=\"deleteFile(event, " + (filesTempArrLen+i)+ ");\"></div>");
    }
    $(this).val('');
}
// 파일 삭제
function deleteFile (eventParam, orderParam) {
    filesTempArr.splice(orderParam, 1);
    var innerHtmlTemp = "";
    var filesTempArrLen = filesTempArr.length;
    for(var i=0; i<filesTempArrLen; i++) {
        innerHtmlTemp += "<div>" + filesTempArr[i].name + "<img src=\"/images/deleteImage.png\" onclick=\"deleteFile(event, " + i + ");\"></div>"
    }
    $("#fileList").html(innerHtmlTemp);
}
 

 

 

데이터를 전송하는 부분의 javascript

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
var formData = new FormData();
 
// 파일 데이터
for(var i=0, filesTempArrLen = filesTempArr.length; i<filesTempArrLen; i++) {
   formData.append("files", filesTempArr[i]);
}
 
formData.append("testData1""A");
formData.append("testData1""B");
formData.append("testData1""C");
 
$.ajax({
    type : "POST",
    url : "서블릿 URL",
    data : formData,
    processData: false,
    contentType: false,
    success : function(data) {
        if(data.result){
            alert("Success");
        }else{
            alert(data.result);
        }
        
    },
    err : function(err) {
        alert(err.status);
    }
});
 

 

 

위와 같이 작성하면 form 태그로 submit 하는거와 동일한 동작을 하면서 파일추가와 삭제를 자유롭게 할 수 있다.

 

 

이 API를 사용하려면 최신의 브라우저를 사용해야 한다.

 

 

 

참고사이트

 

 

'Jquery' 카테고리의 다른 글

Jquery Ajax를 이용한 파일 업로드(FormData 사용)  (6) 2018.06.11
댓글
  • 프로필사진 include 사진 업로드 용으로도 쓰고 싶은데 src 받아올 방법은 없을까요.. 2019.07.04 17:43
  • 프로필사진 선즈반 백엔드(Servlet 같은)에서 데이터를 받아서 저장한 다음 JSON 형태로 src를 리턴한 다음 success 콜백 펑션에서 사용하면 되지 않을까요? 정확한 내용을 몰라서 대략적으로 밖에 대답이 안되네요^^;; 2019.07.04 18:11 신고
  • 프로필사진 질문맨 files 의 값을 받아오려면 컨트롤러에서는 어떻게 받아줘야 파라미터를 받나요? 2019.09.09 10:42
  • 프로필사진 선즈반 아파치 재단에서 제공하는 파일업로드 라이브러리를 사용했습니다. 제가 사용한 공통을 올려드리면 좋은데 프로젝트를 한 소스라 조심스러운 부분이 있어서 참고할만한 블로그를 링크합니다. https://m.blog.naver.com/javaking75/220056175936 도움이 되셨으면 좋겠네요. 2019.09.16 08:55 신고
  • 프로필사진 coneseo 큰 도움이 되었습니다 감사합니다 ! 2020.03.11 21:11 신고
  • 프로필사진 선즈반 도움이 되셨다니 저도 감사하네요^^ 2020.03.12 14:21 신고
댓글쓰기 폼
공지사항
Total
61,791
Today
13
Yesterday
105
«   2021/05   »
            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          
글 보관함