-
ajax로 파일(multipart/form-data) 전송하기개발/Javascript & jQuery 2019. 4. 17. 22:51
AS-IS 소스에서는 사용자가 선택한 파일을 업로드하는 소스를
1234<form method="POST" enctype="multipart/form-data" action="/url"><input type="file" name="file" /><button type="submit" value="save">Save</button></form>cs 이런 식으로 구현했으나
TO-BE로 전환하면서는 파일 업로드 후 자바스크립트 단에서 콜백함수를 호출하도록 만들고 싶어서 방식을 조금 바꿔봤다.
<HTML>
1234<form id="uploadForm"><input type="file" name="file" /><button type="button" id="uploadBtn">Save</button></form>cs <javascript>
1234567891011121314151617181920212223$(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);});}cs 여기서 제일 중요한 것은 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으로 변환하지 않음
'개발 > Javascript & jQuery' 카테고리의 다른 글
실수에서 정수만 추출하기 (0) 2021.02.06 동적으로 생성한 태그에 이벤트 적용하기 (0) 2019.07.20 동적으로 추가된 셀렉트박스에서 원하는 옵션 선택하기 (0) 2019.03.06 팝업창 하나만 띄우기 (0) 2019.02.14 [jqGrid] 그리드 내 행마다 수정/삭제 버튼 삽입하기 (0) 2019.01.24