jQuery 부트스트랩(bootstrap) 파일첨부 만들기

안녕하세요. 은은한 개발자입니다.
 
부트스트랩을 활용한 jQuery 파일 첨부 기능을 만드는 방법에 대해 포스팅해보도록 하겠습니다.
 

1. jQuery 호출

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

먼저 위처럼 jQuery 를 호출해줍니다. 설치한 jQuery 파일이 있다면 그 파일의 링크를 걸어주거나 필자와 같이 cdn을 이용해서 호출하는 방법을 사용해도 좋습니다.
 

2. 다음과 같이 HTML 코딩을 넣어주고 아래와 같이 스크립트를 넣어주면 된다.

<script type="text/javascript">
$(document).ready(function(){
	$("#fileInput").on('change', function(){  // 값이 변경되면
		if(window.FileReader){  // modern browser
			var filename = $(this)[0].files[0].name;
		} else {  // old IE
 			var filename = $(this).val().split('/').pop().split('\\').pop();  // 파일명만 추출
		}

 		// 추출한 파일명 삽입
		$("#userfile").val(filename);
	});
});
</script>



<div class="form-group">
	<label for="InputSubject1">파일첨부</label>
	<input id="fileInput" filestyle="" type="file" data-class-button="btn btn-default" data-class-input="form-control" data-button-text="" data-icon-name="fa fa-upload" class="form-control" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);">
	<div class="bootstrap-filestyle input-group">
		<input type="text" id="userfile" class="form-control" name="userfile" disabled="">
		<span class="group-span-filestyle input-group-btn" tabindex="0">
			<label for="fileInput" class="btn btn-default">
				<span class="glyphicon fa fa-upload"></span>
			</label>
		</span>
	</div>
</div>

이제 위의 예제를 넣어 줍니다.
 

위 예제를 브라우저에서 실행하면 위와 같은 파일 첨부 기능이 완성되게 됩니다.
 
 

[참고]

폼 필드(input type="file") 디자인 #4

그누스트랩 by.부트스트랩