[1일1코딩][SpringBoot] 파일업로드(Multipart)

 

 

 

application.yaml

  servlet:
    multipart:
      enabled: true
      max-file-size: 50MB
      location: /fileupload
      max-request-size: 50MB

 

input타입 file

name,id 속성 profileImage

lable태그 for속성 profileImage

<div class="row mb-3">
    <label for="profileImage" class="col-sm-2 col-form-label">프로필 사진</label>
    <div class="col-sm-10">
        <input type="file" class="form-control" 
            name="profileImage" id="profileImage" /> <!--  -->
    </div> 
</div>

 

submit 발생시 FormData 클래스를  사용해서 기존에 $form을 넣어주고

contentType: false,
processData: false를 해줘야  jQuery에서도 FormData를 서버로 전송이 가능
jQuery 내부적으로는  multipart/form-data 로 전송됨

// form을 핸들링 하기위해 for을 가져옴
var $form = $('#member-join-form'); // html 요소를 찾는 기능. 폼이 2개면 배열이 됨. 이때는 폼태그에 id속성줘서 구분시키면됨

$form.submit(function(){
    try {
        var formData = new FormData($form[0]);
        console.log('formData',formData);
        $.ajax({
            url: '/member/join',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function(){ // success는 스프링으로 치면 controller 역할
                location.href = '/member/join-complete';
            },
            error: function(data){
                console.log(data);
                alert(data.responseJSON.message);
            }
        });
    } catch (e) {
        console.error(e);
    }
    // 페이지가 전환되지 않게 방지
    return false;
})