[Spring Boot] AJAX (💾 파일 업로드)

AJAX 로 파일 업로드 하기

AJAX 로 파일을 업로드하기 위해서는 FormData 객체가 필요하다.

❗ IE8 버전에서는 동작하지 않는다!

그럼 먼저 html 문서를 작성해보자

🔽 view

html

<form>
	<table>
		<caption>글쓰기</caption>
		<tr>
			<th>작성자</th>
			<td>
				<input type="text" name="user_name"/>
			</td>
		</tr>
		<tr>
			<th>제목</th>
			<td>
				<input type="text" name="subject" />
			</td>
		</tr>
		<tr>
			<th>내용</th>
			<td>
				<textarea name="content"></textarea>
			</td>
		</tr>
		<tr>
			<th>파일</th>
			<td><input type="file" name="files" multiple="multiple" onchange="readFile(this)"/>
			<div id="img_list"></div></td>
		</tr>
		<tr>
			<th colspan = "2">
			  <input type="button" value="글 쓰기" onclick="save()"/>
			</th>
		</tr>
	</table>
</form>

• 글쓰기 button 을 누르면 onclick 이벤트가 발생하며 save() 함수가 실행된다.

java script

function save(){
	var form = new FileData($('form')[0]);
  
  	$.ajax({
    	type: 'POST',
      	url: 'write.ajax',
      	enctype: 'multipart/form-data',
      	processData: false,
      	contentType: false,
      	data: form,
      	dataType: 'JSON',
      	success: function(data){
        	if(data.success){
            	location.href=data.page;
            }
        },error: function(e){
        	console.log(e);
        }
    })
}

• FormData 는 자바스크립트 객체이고, $(셀렉터) 는 무조건 배열로 가져오기 때문에 인덱스를 넣어줘야 한다.
• enctype: 'multipart/form-data' : file을 보내기 때문에 지정해줘야 한다.
• success 가 true 일 경우 page에 담긴 위치로 이동한다.

🔽 controller

@PostMapping(value="/write.ajax")
@ResponsBody
public Map<String, Object> write(MultipartFile[] files, @RequestParam Map<String, Object> param){

	boolean success = false;
    
    int idx = service.write(param, files); // DB로 부터 받아온 idx(PK) 정보를 담아준다.
    
    String page = "";
    
    if(idx != 0){
    	success = true;
        page = "./detail.go?idx="+idx;
    }
    
    Map<String, Object> result = new HashMap<String, Object>();
    result.put("success", success);
    result.put("page", page);
    
    return result;
}

• ajax 를 사용하기 위해 @ResponsBody 어노테이션 선언
• MultipartFile[] : 여러개의 파일을 받기 위해 선언
• @RequestParam 사용자의 입력값을 파라미터로 받기 위해 선언
• DB로 부터 받아온 idx(PK) 값을 변수에 담아 변수가 0 이상일 경우 success를 true로 바꾸고 page를 방금 생성된 idx 값으로 넣어 상세보기 페이지로 이동시켜준다.

🔽 service / dto / mapper

service

public int write(Map<String, String> param, MultipartFile[] files) {

	BoardDTO dto = new BoardDTO;
    dto.setUser_name(param.get("user_name"));
	dto.setSubject(param.get("subject"));
	dto.setContent(param.get("content"));
    
    int row = dao.write(dto);
    int idx = dto.getIdx();

	if(idx>0&&row>0) {
		saveFile(files, idx);
	}
	return idx;
}

• 새롭게 입력한 게시글에 상세보기를 하기 위해 DTO 에 set으로 값을 넣어준다.
• DTO에 넣어준 값으로 write() 메서드를 실행하고, idx값을 가져와 변수에 넣어준다.
• 글 정보가 완전히 입력될 경우 file을 저장하는 메서드를 실행한다.

dto

int write(BoardDTO dto);

mapper

<insert 
	useGeneratedKeys="true"
	keyColumn="idx"
	keyProperty="idx"	
	
id="write" parameterType="kr.co.gudi.dto.BoardDTO">
	INSERT INTO bbs(user_name,subject,content) 
		VALUES(#{user_name}, #{subject},#{content})
</insert>

• 해당 쿼리문으로 생성된 idx(PK) 값을 알기 위해 GeneratedKey 사용