Java - input file 커스텀

• input의 type="file"로 설정하면 기본적으로 파일업로드 버튼과 파일명이 커스텀되어있는데 이게 맘에 안들어서
  수정해보기로 했다!

기존 디자인 → 수정된 디자인

 

1. 일단 기본마크업을 변경
   
   
2. <div class="filebox"> <input class="upload-name" value="첨부파일" placeholder="첨부파일"> <label for="file">찾기</label> <input type="file" id="file"> </div>​
3. input style 변경
   

   .filebox .upload-name {
       display: inline-block;
       height: 40px;
       padding: 0 10px;
       vertical-align: middle;
       border: 1px solid #ccc;
   	border-radius: 10px;
       width: 30%;
       color: #999999;
   }

4. label 변경
   

   .filebox label {
       display: inline-block;
       padding: 10px 15px;
       color: black;
       vertical-align: middle;
       background-color: rgb(251,243,238);
       border-radius: 10px;
       cursor: pointer;
       height: 40px;
       margin-left: 5px;
   }

5. 기존 디자인 지우기
   

   .filebox input[type="file"] {
       position: absolute;
       width: 0;
       height: 0;
       padding: 0;
       overflow: hidden;
       border: 0;
   }

6. input 태그에 선택한 파일명 보여주기
   

   $(document).ready(function() { //DOM이 준비되지 않음 -> 해결!
   	$("#file").on('change',function(){
   		 var fileName = $("#file").val();
   		  $(".upload-name").val(fileName);
   		});
   });​