Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

투덜이 개발자

ajax로 파일(multipart/form-data) 전송하기 본문

Program Language/JavaScript & Jquery

ajax로 파일(multipart/form-data) 전송하기

엠투 2021. 11. 12. 10:20
반응형
소스에서는 사용자가 선택한 파일을 업로드하는 소스를
<form method="POST" enctype="multipart/form-data" action="/url">
    <input type="file" name="file" />
    <button type="submit" value="save">Save</button>
</form>

이런 식으로 구현했으나

TO-BE로 전환하면서는 파일 업로드 후 자바스크립트 단에서 콜백함수를 호출하도록 만들고 싶어서 방식을 조금 바꿔봤다.

<HTML>

<form id="uploadForm">
    <input type="file" name="file" />
    <button type="button" id="uploadBtn">Save</button>
</form>

 

<javascript>

$(function(){
 
    $('#uploadBtn').on('click', function(){
        uploadFile();
    });
 
});
 
function uploadFile(){
    
    var form = $('#uploadForm')[0];
    var formData = new FormData(form);
 
    $.ajax({
        url : '/url',
        type : 'POST',
        data : formData,
        contentType : false,
        processData : false        
    }).done(function(data){
        callback(data);
    });
}

여기서 제일 중요한 것은 ajax 옵션이다.

contentType과 processData 옵션 모두 false로 넣어줘야만 잘 동작한다.

이게 없으면 오류가 발생하면서 서버에 제대로 안 날아간다ㅠㅠ....

이유는 아래에 링크로 걸어둔 스택오버플로우에서 찾았음

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

- contentType : false 로 선언 시 content-type 헤더가 multipart/form-data로 전송되게 함

- processData : false로 선언 시 formData를 string으로 변환하지 않음



출처: https://dorongdogfoot.tistory.com/144 [도롱 the Dog Foot]

반응형
저작자표시

'Program Language > JavaScript & Jquery' 카테고리의 다른 글

jQuery select box Control 제어  (0) 2021.12.09
PDF 다운로드- html2pdf.js 이용  (0) 2021.11.24
한글 입력 방지  (0) 2021.11.11
부트스트랩 모달창 열고 닫기  (0) 2021.11.09
[jQuery] 체크박스 전체선택 배열처리. 변수 하나에 담기  (0) 2021.11.05
'Program Language/JavaScript & Jquery' Related Articles more