html 파일 업로드 버튼 변경하기

업로드 버튼 변경은 하고 싶은데

검색해보니 CSS 복잡하게 들어가서 그 중에 필요한 것만 쏙 빼서 만들어보았다.

파일 업로드 버튼을 누르면 바로 파일 탐색창이 뜨도록 하고 싶었기에 구현하였다.

<완성된 모습>

 

  

   
    파일 업로드 
  

해당 버튼 이미지가 보이려면 bootstrap.css가 있어야 한다.

title속성이 정의되어있지 않으면 선택된 파일 없음 이라는 기본 title이 보인다

버튼에 이벤트를 걸어주고 싶다면 

태그 내에 onchange를 입력해도 좋고 아래와 같이 jquery를 이용할 수 있는데 

이때는 live or delegate or on 을 이용한다

$(function() { //IE, Chrome 호환
 $("input[name=file_upload]").on("change", function() {
   alert( this.value ); //선택된 파일의 경로가 나온다.
 });
});