[javascript/jquery] 파일업로드 버튼 커스텀 방법

[javascript/jquery] 파일업로드 버튼 커스텀 방법]

 

 

javascript 에서 파일 업로드를 다루다보면

 

input file 태그를 사용하는데

 

그러면 아래 이미지와 같이 보여집니다.

위와같은 문구를 안보이게 설정하고,

 

[업로드] 라는 텍트스라 보이게 커스텀 하려면

 

아래와 같이 input file 태그에 display:none 스타일을 추가하고, 

 

label 태그를 추가하면 됩니다.

 

<label for="file">[업로드]</label>
<input type="file" name="file" id="file" style="display:none">

 

그러면 아래 이미지와 같이 [업로드] 라는 텍스트로 변경됩니다!

 

원하시는 스타일이 있으시면 라벨에 스타일을 추가하시면 됩니다!

 

그리고 제일 중요한거!!!

 

label 태그를 클릭했을때, 

 

파일 업로드가 동작하게 하려면,

 

for="file" 이 안에 값을 input file 태그의 id 와 동일하게 맞춰 주셔야 합니다!

 

참고들 하세요!