목차
- <input type="file"> 객체 정의 - 파일 인풋
- <input type="file"> 객체 구문
- <input type="file"> 객체 예제 - 접근
- <input type="file"> 객체 예제 - 생성
- <input type="file"> 객체 속성
- <input type="file"> 객체 예제 - 파일 텍스트 메시지 통일
<input type="file"> 객체 정의 - 파일 인풋
HTML <input type="file"> 태그(요소) 의미.
1.
브라우저마다 표시 문자열 다름. (예)
- Chrome: 파일선택 선택된 파일 없음
- Firefox: 찾아보기... 파일이 선택되지 않았습니다.
2.
JS 이용해 모든 브라우저에서 동일하게 보이게 가능. (맨 아래 예제)
(※ 원리: <input type="file"> 요소가 숨어서 작동)
<input type="file"> 객체 구문
[접근]
var x = document.getElementById("요소ID");
또는,
var x = document.getElementById("폼요소ID").elements;
[생성]
var x = document.createElement("INPUT");
x.setAttribute("type", "file");
<input type="file"> 객체 예제 - 접근
<input type="file" id="hz">
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.getElementById("hz");
x.disabled = true;
}
</script>
결과보기
<input type="file"> 객체 예제 - 생성
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("INPUT");
x.setAttribute("type", "file");
document.body.appendChild(x);
}
</script>
결과보기
<input type="file"> 객체 속성
accept
파일 업로드 버튼의 accept 속성값 설정/반환.
autofocus
페이지 로드 시 파일 업로드 버튼이 자동으로 focus 갖을지 여부 설정/반환.
defaultValue
파일 업로드 버튼의 기본값 설정/반환.
disabled
파일 업로드 버튼의 비활성화 여부 설정/반환.
files
파일 업로드 버튼으로 선택한 파일을 나타내는 FileList 객체 반환.
form
파일 업로드 버튼이 포함 된 폼에 대한 참조 반환.
multiple
파일 업로드 필드에서 사용자가 둘 이상의 파일을 선택할 수 있는지 여부 설정/반환. (※ Ctrl키・Shift키 이용해 여러 파일 동시 선택 가능)
name
파일 업로드 버튼의 name 속성값 설정/반환.
required
양식을 제출하기 전에 파일 업로드 필드의 파일을 선택해야하는지 여부 설정/반환.
type
파일 업로드 버튼이 어떤 형태의 폼 요소인지 반환.
value
선택한 파일의 경로 또는 이름 반환.
※ <input type="file"> 객체는 표준 속성/메서드/이벤트 지원.
<input type="file"> 객체 예제 - 파일 텍스트 메시지 통일
<style>
.display {float:left; height:30px;line-height:30px; box-sizing: content-box;}
.btn_box {position:relative;}
.btn_box .btn {width:80px; height:30px; line-height:30px; box-sizing: content-box; overflow:hidden;}
.btn_box .hidden {font-size:29px; position:absolute; right:0px; top:0px; opacity:0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); cursor:pointer;}
</style>
<input type="text" id="hz" class="display" readonly>
<div class="btn_box">
<button type="button" class="btn">파일찾기</button>
<input type="file" name="hz" class="hidden" onchange="javascript: document.getElementById('hz').value = this.value"/>
</div>
결과보기
PS. 주의: box-sizing:content-box 속성 추가해야 <input>과 <button> 높이가 동일해짐.
