35일: FormData(), MIME type, 파일업로드는 POST만

2021.12.31.Fri.

✍ 복습

FormData()

파일을 업로드 하는 경우 JS의 FormData 객체를 사용해야 한다.

• multipart인 form을 읽어와서 FormData 객체를 생성

const formData =
           new FromData(document.getElementById(폼 아이디));
const formData = new FormData($('#폼 아이디')[0]);

• form이 없는 경우

const formData=new FormData();
formData.append('photo', $('#photo')[0].files[0]);

$('#photo')[0] → <input type='file' id='photo'>
file 요소는 multiple을 지정한 경우 파일을 여러개 선택하는게 가능하기 때문에 .files[0]라는 배열이 생성

• $.ajax 함수에서는 processData, contextType을 false로 지정

웹에서 문서 형식을 지정하는 방법 MIME type

application/excel, application/hwp, application/json, image/jpg. image/gif...

서버로 값을 보내는 방식

urlencoded, json, form-data

변경하는 건 PUT

하지만 사진만 변경은 POST, 왜냐하면 파일업로드는 POST만 가능하기 때문.

<!--POST/contacts/번호/photo 사진변경-->
<form action="/contacts/번호/photo" method="post"
      enctype="multipart/form-data">
  <input type="file" name="photo" id="photo">
  <button></button>
</form>