[JavaScript] input type=file 파일업로드 ajax로 전송하기

썸네일 업로드 기능을 구현하던 중에 문제가 발생했다. (또...)

썸네일 컬럼은 상품 게시글 테이블 내에 있었고, 이미지 업로드시 이미지 정보가 들어가는 테이블은 따로 만들었다.

그리고 이미지 테이블은 id, 파일명, 파일경로 (파일경로+uuid+파일명) 컬럼으로 이루어져 있다.

어제 구현한 대로 이미지경로+썸네일컬럼 으로 썸네일을 가져오기 위해서는 이미지 테이블에 있는 uuid+파일명이 필요했다.

그래서 아래 쿼리를 사용하여 이미지를 가져오는 것에는 성공했지만, 문제가 있었다. 

이미지가 로컬에 업로드되고 db에 저장되는 것보다 쿼리가 먼저 실행되어 파일명을 찾지 못하는 것이었다.

이 친구도 썸머노트 이미지 업로드처럼 글 등록 버튼을 누르기 전에 비동기로 파일을 먼저 전송하면 될 것 같았다.

파일업로드 후 썸네일 업로드 버튼을 누르는 방식과 파일업로드-파일 선택 버튼을 눌렀을 때 전송되는 방식 중에 고민했는데 후자가 사용자 입장에서 더욱 간편할 것 같아 후자를 선택했다. 

 

 

<div class="form-group">
    <label for="thumbnail">썸네일</label>
    <input type="file" class="form-control" id="thumbnail" onchange="uploadFile(this)" accept="image/**">
</div>

html에서 onchange="uploadFile(this)" 코드를 통해 function을 불러온다.

 

    <script>
        //썸네일저장
        const uploadFile = function () {
            const imageInput = $("#thumbnail")[0];
            if(imageInput.files.length === 0){
                alert("썸네일을 선택해주세요");
                return;
              }
            const formData = new FormData();
            formData.append("file", imageInput.files[0]);
            $.ajax({
                url : '/image',
                type : 'POST',
                data : formData,
                cache : false,
                contentType : false,
                enctype : 'multipart/form-data',
                processData : false
            }).done(function(data){
                 console.log("success")
            });
        }

    </script>

function명을 지정하고 파일업로드 input의 id를 가져와 변수로 지정한다.

썸네일은 이미지 하나만 등록이 가능하기 때문에 배열의 [0]번째 값만 가져온다.

 

ajax에서 url은 파일등록 컨트롤러에 매핑된 곳으로 지정하고, type는 post로 설정한다.

contentType, processData는 모두 false로 설정해야 한다.

content-type를 false로 설정하면 content-type 헤더가 multipart/form-data로 등록이 되고,

processData를 false로 설정하면 formData를 string으로 변환하지 않는다고 한다.

 

 

 

참조출처

https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax