HTML - 파일 업로드

input 의 type 속성의 값이 file 이면 서버로 파일을 전송할 수 있습니다.

<form enctype="multipart/form-data" action="" method="POST"> 
 <input type="file" name="upfile" value="" accept="image/*"> 
 <input type="submit" value="전송" /> 
</form>

enctype 속성

전송할 데이터의 인코딩 유형을 설정합니다.

속 성	설 명
application/x-www-form-urlencoded	모든 문자를 인코딩함. 기본값.
multipart/form-data	인코딩 안함. 파일 업로드시 사용됨.
text/plain	공백은 + 기호로 변환하지만, 특수문자는 인코딩 안함.

multiple 속성

파일을 여러 개 선택할 수 있게 하는 속성입니다. 현재 name 속성 값이 "upfile" 인데 다중 파일을 전송되게 하려면 name 속성 값 끝에 [] 를 붙여 주세요.

<input type="file" name="upfile[]" value="" multiple>

accept 속성

파일의 종류(Mime-Type)를 설정하는 속성입니다. 

이미지 파일만 선택하게 하려면 "image/*", 비디오만 선택하게 하려면 "video/*"로 설정하세요. 모든 파일을 허용하려면?? 그냥 비워 주세요.

formaction, formmethod, formencrype, formtarget formnovalidate 속성

<form>태그에 action, method, enctype, target 요소를 동일하게 <input>태그에도 사용할 수 있습니다. 이 기능은 HTML5 부터 submit 속성에 다음 요소를 붙일 수 있습니다.

속 성	설 명
formmethod	form 의 method 속성과 동일함.
formaction	form 의 action 속성과 동일함.
formenctype	form 의 enctype 속성과 동일함. 이 속성은 method = "post"인 경우에만 사용할 수 있습니다.
formtarget	form 의 target 속성과 동일함.
formnovalidate	type = "submit"과 함께 사용할 수 있으며, 이 속성을 지정하면 입력 값의 유효성을 검증하지 않게 됩니다. 그리고, novalidate 속성을 덮어 씁니다.

<form>
 <input type="file" name="user">
 <input type="submit" formenctype="multipart/form-data"
            formmethod="POST" formaction="send.php" value="전송">
</form>

이제 formnovalidate 를 사용하여 돌아가기 버튼를 구현해 보겠습니다. 돌아가기 버튼을 요청하면 입력 값을 검증하지 않게 할 수 있습니다.

<form>
<input type="file" name="user">

<!-- 전송 버튼 -->
<input type="submit" formenctype="multipart/form-data"
         formmethod="POST" formaction="send.php" value="전송">

<!-- 돌아가기 버튼 -->
<input type="submit" formmethod="GET" formaction="list.php"
         formnovalidate value="돌아가기">
</form>