[HTML] input type='file' 속성 알아보기 ( 파일 입력 )

웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는

다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다.

See the Pen read file by anna (@hianna) on CodePen.

 

 

 

여기에서는 input의 type을 'file'로 지정했을 때 추가로 사용할 수 있는 속성들에 대해서 알아보도록 하겠습니다.

 

<< input type='file' 속성 >>

 

"accept"

입력받을 수 있는 파일의 유형을 지정하는 속성입니다.

accept 속성을 지정하지 않으면 모든 유형의 파일을 입력 받을 수 있습니다. 

여러 종류의 파일을 입력받기 위해서는 아래와 같이 쉼표로 목록을 구분하여 작성합니다.

See the Pen read file by anna (@hianna) on CodePen.

 

accept 속성 값

- 확장자 명( .txt, .pdf 등 처럼 마침표로 시작하는 확장자 명을 써줍니다.)

- MIME 타입 ex) text/plain, image/jpeg, audio/mpeg, image/* 등

 

위 예제는 모든 이미지 파일과 txt확장자 파일을 입력 받을 수 있습니다.

하지만, 이 설정이 이미지 파일과 txt 확장자 이외의 파일을 입력받을 수 없도록 제한하는 것은 아닙니다.

accept 속성을 지정하더라도,

아래와 같이 파일 선택 시, '모든 파일(*.*)'을 선택할 경우,

지정된 이미지 파일과 텍스트 파일 이외의 파일도 입력 받을 수 있습니다.

 

그렇다면, 특정 파일 형식만 입력받을 수 있도록 강제하려면 어떻게 해야 할까요?

일단 파일을 입력 받은 후, 그 파일의 형식을 체크해야 합니다.

그 방법은 다음의 포스팅을 참조하세요.

 

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

 

"capture"

모바일 디바이스에 적용되는 속성입니다.

accept 속성에 이미지 또는 비디오를 입력받는 경우, 기기의 어떤 카메라를 이용할지 지정합니다.

 

capture 속성 값

- user : 전면 카메라

- environment : 후면 카메라

 

 

"files"

사용자가 파일을 선택하면, 선택된 파일의 목록이 FileList 객체 형태로 files 속성에 저장됩니다.

즉, 선택된 파일 목록을 가져오려면 files 속성을 참조하면 됩니다.

files 속성을 참조하는 방법은 아래 포스팅을 참조하세요.

 

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

 

"multiple"

사용자가 ctrl / shift 키를 사용하여 한번에 여러개의 파일을 선택하게 할지, 한번에 하나의 파일만 선택하게 할지를 결정하는 속성입니다.

boolean 값을 가집니다.

See the Pen read file by anna (@hianna) on CodePen.

 

 

"required"

form이 submit 될때, 반드시 파일이 선택되어야 하는지 여부를 지정하는 속성입니다.

'required' 속성이 지정되었는데, 파일을 선택하지 않고, submit 하게 되면,

파일을 선택하라는 메세지가 나옵니다.

boolean 값을 가집니다.

See the Pen read file by anna (@hianna) on CodePen.

 

"value"

사용자가 선택한 파일의 경로 값을 가집니다.

만약, 여러 파일을 선택한 경우, 목록의 첫번째 파일 경로 값만을 가집니다.

단, 악의적인 사용을 방지하기 위해 모든 파일의 경로 앞에 'C:\fakepath\'가 포함됩니다.

See the Pen read file by anna (@hianna) on CodePen.

 

 

HTML에서 file을 입력 받을 수 있는 <input type='file' />에 들어갈 수 있는 속성들에 대해서 알아보았습니다.