HTML4 - form 태그의 enctype 속성 (파일 업로드)

◎ enctype 속성

​

<form>태그의 속성인 method, action, enctype 등은 입력받은 데이터를 어떻게 처리할 것인지 세부적으로 설정하는 데 사용된다. method는 전송 방식, action은 전송 목적지, enctype은 전송되는 데이터 형식을 설정한다.

​

▼ 내용

enctype 속성은 다음 세가지의 값으로 지정될 수 있다.

​

1. application/www-form-urlencoded

디폴트값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다. 폼데이터는 서버로 전송되기 전에 URL-Encode 된다.

2. multipart/form-data

파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다. 그렇게 하지 않으면 웹 서버로 데이터를 넘길때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문이다. 그리고 이떄 메소드는 post값으로 지정해줘야 한다

3. text/plain

이 형식은 인코딩을 하지 않은 문자 상태로 전송한다.

​

​

request에 들어있는 데이터

<form action="/videos/upload" method="post" enctype="multipart/form-data"> <input type="file" id="file" name="videoFile" required="" accept="video/*"> <input type="text" placeholder="Title" name="title" required=""> <textarea name="description" placeholder="Description" required=""> </textarea> <input type="submit" value="Upload Video"> </form> /////////////////////////////////////////////////////////////////////////////////// //form 객체에 들어있는 데이터 enctype="multipart/form-data 아래는 NODE.JS로 객체확인 request.body = { title: 'abcd', description: 'efgh' }; request.file = { fieldname: 'videoFile', originalname: 'sidetoside.mp4', encoding: '7bit', mimetype: 'video/mp4', destination: 'videos/', filename: '1e8e29d1aa9431881308d7df174b4171', path: 'videos\\1e8e29d1aa9431881308d7df174b4171', size: 18667990 } /////////////////////////////////////////////////////////////////////////////////// // enctype="multipart/form-data 이 없을시 request.body = { videoFile: 'sorrynotsorry.mp4', title: 'abcda', description: 'efegfg' } request.file = undefined;

위 처럼 enctype가 있으면 type=file 인 input은 file의 대한 데이터를 request에 담는다.

​

enctype가 없으면 request에 file의 경로와 이름만 전송되고 file의 대한 데이터는 전송되지 않는다.