[CSS] input type=file CSS적용하기

<div class="filebox"> 
  <label for="file">업로드</label> 
  <input type="file" id="file"> 
  
	<input class="upload-name" value="파일선택">
</div>

input[type="file"]의 경우 브라우저마다 기본 디자인이 다르다.

 

브라우저에 상관없이 같은화면을 보여주기위해  또는 디자인 적용을 위해서는 

input[type="file"]을 숨기고, label을 이용해 버튼을 만들고,

input을 하나 더 만들어서 파일경로를 출력해서 선택한 내용을 보여주도록 변경해 보았다. 

 

 

선택한 내용을 보여주는 것은 

input[type="file"]에 change 이벤트를 등록해 값이 변하면 그것을 읽어와 이름을 출력해 주는 방식으로 구현하였다.

 

 

$(document).ready(function(){ 
  var fileTarget = $('#file'); 
  fileTarget.on('change', function(){ // 값이 변경되면
      var cur=$(".filebox input[type='file']").val();
    $(".upload-name").val(cur);
  }); 
}); 

 

 

 

 

 

[CSS/CSS 기초] - [CSS]input[type=radio], input[type=checkbox] 스타일 적용 및 checked 선택자 이용하기