코딩쌀롱
[HTML¦CSS] input type='file'로 파일 입력 받기 본문
파일을 읽는 것은 JavaScript로 가능하고, 이것에 관한 글은 다음 링크를 참고! (JS로 파일 읽기 링크)
웹에서 사용자의 로컬 파일을 입력받기 위해서 input 태그의 type 속성을 file로 지정하는 방법을 사용한다.
<input type="file">이렇게만 했을 때 크롬 브라우저에서 확인하면 아래와 같이 나온다.
✱ input type="file"의 속성들
사용할 수 있는 여러가지 속성들이 있다.
‣ accept, multiple, files, value, capture
accept : 입력받을 수 있는 파일의 유형을 지정하는 속성
지정하지 않으면 모든 유형의 파일을 입력받을 수 있다. 여러 종류의 파일을 입력받기 위해서는 쉼표로 목록을 구분하여 작성한다. 값으로는 확장자명과 MIME 타입을 적는다.
- 확장자명 : .txt, .pdf, .csv 등
- *MIME 타입 : text/plain, image/jpeg, image/* 등
*MIME(Multipurpose Internet Mail Extensions) : 이메일을 위한 인터넷 표준 포멧. MIME 헤더에는 Content-Type이 있는데 이 헤더는 메시지의 타입과 서브타입을 나타낸다. Content-Type: text/plain 이런 식으로. 이 타입과 서브타입을 합쳐 MIME 타입이라 부른다.
하지만 이 속성이 값으로 입력한 파일 종류만 입력받을 수 있도록 제한하는 것은 아니다. accept 속성을 지정하더라도 파일 선택시 '모든 파일(*.*)'을 선택할 경우 다른 파일도 입력할 수 있다. 특정 파일 형식만 입력받을 수 있도록 하려면 파일을 입력받은 후 자바스크립트로 파일 형식을 체크해주면 된다.
multiple : 지정한 경우사용자가 ctrl / shift 키로 복수의 파일을 선택할 수 있다. boolean값을 가진다.
files : 사용자가 선택한 파일의 목록이 FileList 객체 형태로 files 속성에 저장된다.
선택된 파일의 목록을 가져오려면 files 속성을 참조하면 된다. multiple 속성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않는다.
value : 사용자가 선택한 파일의 경로 값이 value 속성에 저장된다.
여러 개의 파일을 선택한 경우, 목록의 첫 번째 파일 경로 값을 저장한다. 악의적인 소프트웨어가 파일 구조를 알아내는 것을 방지하기 위해 모든 파일의 경로 앞에 'C:\fakepath\'가 포함된다.
capture : 모바일 디바이스에 적용되는 속성
accept 속성에 이미지 또는 비디오를 입력받는 경우, 기기의 어떤 카메라를 사용할지 지정한다. 누락한 경우 사용자가 결정한다.
- user: 전면 카메라
- environment: 후면 카메라
예로, 모든 이미지 파일, 텍스트 파일을 복수로 선택할 수 있게 한 input type="file"은 아래 코드로 작성할 수 있다.
<input type="file" accept="image/*,.txt" multiple>
✱ input필드 숨기고 버튼 하나로만! (css)
상호작용을 위해 label 요소의 for 속성을 input 요소의 id 값과 일치시킨다.
안 예쁘다.. CSS를 입혀보자.
필드 숨기는 코드를 설명해보자면,
‣ position: absolute : clip이 absolute, fixed일 때만 적용 가능하기 때문 + 레이아웃에 영향을 끼치지 않게.
‣ width: 1px; height: 1px : 스크린 리더가 읽을 수 있도록
‣ padding: 0 : 상속되거나 적용될 수 있는 스타일을 제거해서 안전하게
‣ border: 0 : 상속되거나 적용될 수 있는 스타일을 제거해서 안전하게. 그리고 border: none과 border: 0은 다른데, border: none으로 했을 때 border-style을 적용할 경우 우선순위때문에 border: none인데도 테두리가 생긴다. 그래서 더 안전한 border: 0을 사용
‣ margin: -1px : 부모 요소 밖으로 위치시킴
‣ clip: rect(0, 0, 0, 0) : 요소 숨기기. 처음에 top, right, bottom, left를 margin 줄 때처럼 생각을 해서 이해를 못 했는데 선언 순서는 같지만 기준 점이 다르다. clip은 네 방향 모두 좌측상단이 기준이다.margin 에서 bottom은 해당 요소 아래에서 얼마큼 떨어질지였지만, clip은 상단에서 얼마큼 떨어질지가 bottom라인이 된다. 그래서 top과 bottom이 같은 값이면 요소가 숨겨지게 된다. 마찬가지로 left, right가 같은 값이면 요소가 숨겨진다.
‣ overflow: hidden : overflow된 콘텐츠를 숨기기.
clip과 overflow는 같은 박스를 대상으로 적용하지 않는다고 하는데(clip은 content box에, overflow는 border box에) 이 부분은 이해를 못 했다. 이해하고 다시 이 부분은 수정해서 설명을 적어놔야겠다.
label로 input과 연결해줘서 label을 버튼처럼 그려서 클릭하면 input을 클릭한 것처럼 해주고, ui가 지저분한 input은 숨겨버렸다. 훨씬 깔끔하기 보기 좋은 것 같다.
참고📚
블로그 - input type='file' 속성 알아보기
블로그 - border: none과 border: 0의 차이
학습 단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 곧바로 정정하도록 하겠습니다🙂
'개발공부' 카테고리의 다른 글
| [Node.js] npm으로 package.json 관리하기 (0) | 2021.02.23 |
|---|---|
| [JS] input type="file" 파일 읽기 (0) | 2021.02.07 |
| [JS] 마이크로 태스크, 매크로 태스크, 비동기 실행 흐름 이해하기 (7) | 2021.01.27 |
| [JS] Promise → async/await로 바꾸기 (0) | 2021.01.26 |
