input file 버튼 커스터마이징하기 > html

<script type="text/javascript">
<!--
$(function() {
	// 파일 업로드
	var fileTarget = $(".filebox .upload-hidden");
	fileTarget.on("change", function(){
		if (window.FileReader) {
			var filename = $(this)[0].files[0].name;
		} else {
			var filename = $(this).val().split("/").pop().split("\\").pop();
		}
		$(this).siblings(".upload-name").val(filename);
	});
});
//-->
</script>

<style type="text/css">
/* 파일 업로드 */
.filebox input[type="file"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0:}
.filebox label {display:inline-block; padding:.5em .75em; color:#999; font-size:inherit; line-height:normal; vertical-align:middle; background-color:#fdfdfd; cursor:pointer; border:1px solid #ebebeb; border-bottom-color:#e2e2e2; border-radius:.25em:}
.filebox .upload-name {display:inline-block; padding:.5em .75em; font-size:inherit; font-family:inherit; line-height:normal; vertical-align:middle; background-color:#f5f5f5; border:1px solid #ebebeb; border-bottom-color:#e2e2e2; border-radius:.25em; -webkit-appearance:none; -moz-appearance:none; appearance:none:}
.filebox.bs3-primary label {color:#fff; background-color:#337ab7; border-color:#2e6da4:}
.file_submit {padding:0 5px; height:30px; border:0; color:#fff; background:#ff3061; vertical-align:middle; cursor:pointer;}
</style>

<div class="filebox bs3-primary">
	<input class="upload-name" value="파일선택" disabled="disabled">
	<label for="upload">파일 (*.xls) 선택</label>
	<input type="file" id="upload" name="upload" class="upload-hidden">

	 <input type="submit" value="업로드 하기" class="file_submit">
</div>