File Upload

File Upload

form 처리 시 input type을 file로 설정함으롰

서버에 파일을 업로드할 수 있다.

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

• type을 file로 설정
• name을 클라이언트/서버 간 보낼 데이터의 이름으로 지정
• accept에서 허용 가능한 file type을 지정할 수 있음
• id는 클라이언트에서 어떤 제어를 하는 경우에 사용

 

 

실습

  <div class="formWrap">
    <form action="/join" method="post" id="myform">
      <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 추가 -->
        <input type="file" name="reviewImg" id="reviewImageFileOpenInput" accept="image/*">
      </div>
      <input class="sendbtn" type="submit">
    </form>
  </div>

 

 

 

Content-Type 설정

일반적인 form 데이터 전송 시에

HTTP Header에는 , 'application/x-www-form-urlencoded' 라는 정보로 노출된다.

• Content-Type:application/x-www-form-urlencoded

그런데, file 전송은 이와 다르다.

아래처럼 form 태그의 속성으로, enctype을 multipart/form-data로 지정해야 한다.

    <form action="/join" method="post" id="myform" enctype="multipart/form-data">

서버에서는 multipart/form-data를 처리할 수 있도록 해야하기 때문

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

 

multipart/form-data의 실제 데이터를 서버로 전송되는 과정을 살펴보자

개발자 도구의 Network 탭 확인해보자

 

form-urlencoded 방식의 데이터임을 Post 방식으로 요청하였다.

이 방식의 단점은 아래와 같이 파일의 이름만 전송된다는 점이다

 

 

 multipart/form-data 적용 후

 

 WebKitFormBoundaryiUIOhJXAwxorM25j 라는 어떤 구분정보를 기준으로 데이터가 노출된다

 

 

 

다른 input 데이터들과 같이 서버로 보내야 한다면, 아래와 같이 html페이지를 구성할 수 있을 겁니다.

<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>

 

 

 

Ajax의 FormData()로도 구현 가능

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#sending_files_using_a_formdata_object

Using FormData Objects - Web APIs | MDN