file upload방법의 이해

<input type="file" name="reviewImg" id="reviewImageFileOpenInput" accept="image/*">

form data를 통해 file upload를 할 수 있다.

• type : input tag에 들어갈 type 선언
• name : server에서 인식 할 수 있게 name 선언
• id : client에서 제어를 위해 id 선언
• accept : 허용 가능한 file type 제한 

일반적인 form 데이터 전송 시에 HTTP Header에는 기본적으로

Content-Type:application/x-www-form-urlencoded 라는 정보로 노출 됩니다.

 

그러나 file을 전송할 때는 좀 다릅니다.

Form 태그의 속성으로, enctype를 multipart/form-data로 지정해야 합니다.

 

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7rKYKhIWaTrjvGi1

크롬 개발자 도구의 network탭 정보

------WebKitFormBoundaryiUIOhJXAwxorM25j
Content-Disposition: form-data; name="email"

werwerw@sefdsf.com
------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--

 

 

 

file이 아닌 다른 input 데이터와 함께 보낼 경우 예제

<div class="formWrap">
    <form action="/join" method="post" id="myform" enctype="multipart/form-data">
        <div class="inputWrap">
            <div class="email">
                <span> Email </span> <input type="text" name="email"><br/>
            </div>
            <div class="password">
                <span> Password </span> <input type="password" name="password"><br/>
            </div>
        <input type="file" name="reviewImg" accept="image/*">
        </div>
        <input class="sendbtn" type="submit">
    </form>
</div>

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

 

생각해보기

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

여기를 참고하세요

 

---

참고 자료

 

[참고링크] Using FormData Objects

https://developer.mozilla.org

 

[참고링크] file input 처리하는 방식 설명

https://developer.mozilla.org

 

[참고링크] multipart 보낼때 데이터 구분에 대한 내용

https://stackoverflow.com