HTML, Input 파일탐색기, Finder FileFormat 지정

서론

파일을 올릴 수 있는 웹사이트를 만들며

 

이전에는 조건문을 이용해 직접 파일형식을 지정해주었습니다.

 

input 태그에 대한 공식문서를 찾아보니 이미 HTML에 기능이 있기에 가볍게 정리해보려 합니다.

(이래서 공식문서 참조가 참 중요해 그냥 막 갖다 쓰면 안대)

---

input 태그는 다양한 값을 사용자로부터 입력받습니다.

 

File, Date, Number, CheckBox, radio 등이 올 수 있습니다.

<input type="file"/>

 

블로그, 학교, 정부기관, 채용사이트등 웹사이트에서는 사용자가 파일을 첨부할 일이 생깁니다

 

위에 코드와 같이 type을 파일로 지정하면

 

사용자의 로컬환경에서 파일을 첨부할 수 있게 됩니다.

 

이 때 사용자로부터 특정 파일의 형식만을 지정하고 싶다면 어떻게 해야하는가?
(필자는 멍청하게 자바스크립트로 직접 파싱해서 조건문으로 틀어 막았습니다,, 엉엉)

<input type="file" accept="image/*,.pdf,.ppt" />

input tag에는 accept Attribute가 있어 파일형식을 지정할 수 있습니다.

 

따옴표 안에 콤마','를 기준으로 확장자를 적어주면 해당 형식의 파일만

 

파일 탐색기와 Finder를 통해 선택할 수 있게 됩니다.

 

친절하게도 ShellScript와 유사하게 image/* 와 같이 비슷한 형식의 파일들을 한 번에 지정할 수도 있습니다. 

Finder에서 선택불가한 파일형식

결론

accept attribute를 통해 쉽게 사용자 첨부 파일 형식을 지정할 수 있다.

 

무작정 JS를 쓰는것보다 HTML, CSS를 활용하면 더 쉽고 효율적으로

 

웹사이트를 구성할 수 있음에 머리를 탁 치며 갑니다

 

<input type="file"> - HTML: HyperText Markup Language | MDN