• 들어가기 전에 form 전송 시에 이미지와 같은 파일을 서버로 올리는 경우가 간혹 있습니다. 일반적인 값을 서버로 보내는 것과 다르게 처리해야 할 부분이 존재합니다. 알아보겠습니다.

---

1. File을 서버로 업로드 하는 방법을 안다.

• file upload

form 데이터를 그대로 보낸다면, file도 input방식으로 업로드가 가능합니다. file type에도 역시 name으로 이름을 지정해야 서버에서 이를 인식해서 데이터를 얻을 것입니다. 아래는 input type이 file인 경우 예제입니다. <input type="file" name="reviewImg" id="reviewImageFileOpenInput" accept="image/*"> 지금까지만 보면 클라이언트 입장에서는 file을 올린다고 해서 크게 다르진 않습니다. type을 file로 선언해두면 되고, name설정을 해서 클라이언트/서버 간의 보낼 데이터의 이름을 지어주면 됩니다. accept는 허용 가능한 file type을 결정지을 수 있습니다. 이와 관련해 유용한 속성은 여러 개 있는데, 브라우저 지원이 제한적인 상태이므로 참고해서 사용해야 합니다. 마지막 id는 클라이언트에서 어떤 제어를 해야 하는 경우에만 사용합니다. 일반적인 form 데이터를 전송 시에 HTTP Header에는 기본적으로, 'application/x-www-form-urlencoded'라는 정보로 노출 됩니다.

• Content-Type:application/x-www-form-urlencoded 그런데, file을 전송할 때는 좀 다릅니다. 아래처럼 Form 태그의 속성으로, enctype를 multipart/form-data로 지정해야 합니다.
• Content-Type:multipart/form-data;boundary=----WebKitFormBoundary7rKYKhlWaTrjvGi1 여기서 다루지는 않지만, 서버에서는 multipart/form-data를 처리할 수 있도록 합니다. multipart/form-data의 실제 데이터를 서버로 어떻데 전송이 될까요? 크롬 개발자도구의 network탭에서 요약된 정보를 통해서 이를 이해할 수 있습니다. `------WebKitFormBoundaryiUIOhJXAwxorM25j Content-Disposition: form-data; name="email"

[email protected] ------WebKitFormBoundaryiUIOhJXAwxorM25j Content-Disposition: form-data; name="password"

werwerwerwerwer ------WebKitFormBoundaryiUIOhJXAwxorM25j Content-Disposition: form-data; name="reviewImg"; filename="A_Pen_by_younjisu.png" Content-Type: image/png

------WebKitFormBoundaryiUIOhJXAwxorM25j--특이한 점은, 아래와 같이 WebKitFormBoundaryiUlOhJXAwxorM25j라는 어떤 구분정보를 기준으로 데이터가 노출되고 있습니다. 다른 input 데이터들과 같이 서버로 보내야 한다면, 아래와 같이 html페이지를 구성할 수 있을 겁니다.

` 실제로는 파일을 보낼 때는, 보통 다른 데이터와 별도로, 먼저 보내는 경우도 많습니다.

1. file upload를 Ajax기술로 구현할 수 있을까요? 네 가능합니다.
2. 약간 더 복잡한 처리를 해야하지만, FormData라는 속성을 이용하면 좀더 쉽게 구현할 수가 있습니다.