input의 file타입, file타입의 속성

# input type="file" 관련

• type="file" : 웹페이지에서 사용자의 로컬 파일을 입력받기 위한 것.

 <input type="file" accept="image/*,.txt" multiple required capture='user' onchange='aaa'/>

 

## file 타입의 속성

### accept 속성

• accept="" : 사용자로부터 로컬 파일을 입력받을 때 입력받을 파일의 유형을 설정하는 것, 확장자 명을 넣어준다. (단, 해당 속성은 정해진 파일 이외의 파일을 입력받을 수 없도록 제한 하는것은 아니다.)
• MIME 타입 ( text/plain, image/jpeg, audio/mpeg, image/* 등의 확장자 명을 넣어준다.

<input type="file" accept=".jpg, .png, .gif, .mp4"/>

 

### multiple

• ctrl / shift 키를 사용, 한번에 여러개의 파일을 선택 가능하게 할지 또는 하나의 파일만 선택 가능하게 할지 결정하는 것으로 boolean 값을 가진다.

// Shift/Ctrl 키를 이용하여 다중 파일 선택 가능
<input type="file" multiple/>

// 단일 파일 선택
<input type="file"/>

 

### required

• form이 submit 될 때 파일이 반드시 선택되어야 하는지 여부를 결정하는 것으로 boolean 값을 가진다.
• 해당 속성이 지정되어 있는 경우 파일을 선택하지 않고 업로드 하면 파일을 선택하라는 메세지가 나온다.

<input type="file" required/>
<input type="submit">

 

### capture

• 모바일 디바이스에 적용되는 속성 값으로, accept 속성에 이미지 또는 비디오를 입력받는 경우에 기기의 어떤 카메라를 이용할지 지정하는 것
• capture="user" : 기기의 전면 카메라
• capture="environment " : 기기의 후면 카메라