728x90
<input type = file>
- accept: 입력가능한 파일 유형 지정
- 1) 특정 확장자로 지정: <input type="file" accept=".gif, .jpg, .png">
- 2) 미디어 타입으로 지정: <input type="file" accept="image/*">
-
<!--이미지 파일만 업로드하기--> <!--확장자로 지정--> <input type="file" accept=".gif, .jpg, .png"> <!--미디어 타입으로 지정--> <input type="file" accept="image/*"/>
- defualt는 모든 입력 파일 입력O
- ,로 구분하여 여러 종류 입력O
- "사용자 지정 파일"을 "모든 파일"로 변경할 경우, 다른 파일도 첨부O(특정 파일 형식만 입력하도록 강제하기 위해서 javascript 추가 코드 필요)
- multiple: 한 번에 여러개 파일 선택(업로드) 가능 여부(boolean)
- required: 필수 선택 여부(boolean)
[참고]
https://hianna.tistory.com/346
[미디어 타입 참고]
http://www.iana.org/assignments/media-types/media-types.xhtml
<input file 버튼 모양 디자인 변경하기>
<label for="upload" style="">업로드</label>
<input type="file" id="upload" style="display:none"/>
1. <label> 생성
- input과 연결하기 위해 for 속성 지정
- 원하는 버튼 css style 지정
- 텍스트 대신 이미지 버튼으로 할 수 도 있음( fontawsome <i>태그 활용>
2. input file 생성
- id 지정(label 태그의 for 값과 동일한 값으로 설정해야함!)
- input sytle을 꼭 display:none으로 안보이게 해줘야 함!!
<이미지 파일 미리보기>
- onchange: 변화 감지 event
728x90
'주간 학습 > 주간 학습' 카테고리의 다른 글
4주차_210723 (0) | 2021.07.23 |
---|---|
4주차_210722 (0) | 2021.07.22 |
4주차_210720 (0) | 2021.07.22 |
html 유용한 단축키 (0) | 2021.07.16 |
3주차_210716 (0) | 2021.07.16 |