[HTML] input [type="file"] 속성(property) 정리

1. accept 속성 

• 서버로 업로드하는 파일의 type을 명시 합니다.( ex: .jpg)
• 하나 이상의 확장자를 사용할 경우 콤마로 구분 합니다. ( ex: .jpg,.png,.svg)
• accept을 사용하지하지 않으면 모든 파일을 입력 받습니다.
• 확장자을 지정 하여도 사용자가 모든파일(*.*) 선택하여 올릴수 있습니다. (주의)
• 특정 확장자만 입력 받고 싶다면 별도 작업 필요합니다.

<input type="file" accept=".jpg,.png,.svg">

2. capture 속성

• 모바일에서 이미지 업로드 할때 사용합니다.
• capture 속성 값으로 전/후면 카메라를 우선 작동시킬수 있습니다.

<input type="file" accept="image/*" capture="user"> //전면카메라
<input type="file" accept="image/*" capture="environment"> //후면카메라

 

3. required 속성

• 파일이 선택 되어 있는지 확인 할 때 사용합니다.
• 파일 미선택 시 '파일을 선택하세요'라고 메시지가 보입니다.

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

4. multiple 속성

• 단일 파일이 아닌 여러 파일을 동시에 선택할수 있습니다.
•  CTRL or SHIFT key를 사용합니다.

<input type="file" multiple/>

 

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.