Wallel

input type file의 외형을 간단히 수정할 수 있는 방법을 기록한다.

jQuery로 작성되어 있으나 IE는 고려하지 않았다.

HTML

<label for="attached">
	<input class="file_real" id="attached" type="file">
	<input class="file_fake" type="text" placeholder="* 10MB 미만의 jpg, png, bmp, gif만 첨부 가능" readonly tabindex="-1">

	<span class="btn">첨부하기</span>
</label>

.file_real이 실제로 작동하는 input 이고
.file_fake는 사용자에게 보여지는 input이다. readonly를 추가하여 사용자가 수정할 수 없게 하고 tabindex="-1"을 주어 텝으로 이동해도 focus 되지 않게 했다.

jQuery

$('.file_real').on('change', function() {
	var files = $(this)[0].files[0];
	var fake = $('.file_fake');
	
	fake.val('');
	if ( files !== undefined ) {
		fake.val(files.name);
	}
});

fake.val(''); 로 input을 초기화 해주는 이유는, 파일 첨부 팝업을 띄우고 “취소”를 누르면 기존에 선택된 파일이 사라지기 때문에
fake input 에서도 value 값을 지워주기 위함이다.

미리보기

참고 문서

1. select box, input box style 초기화 CSS
2. 폼 필드(input type=”file”) 디자인 #4

input file파일첨부 버튼 꾸미기