[JavaScript + CSS] 타입이file인 input 디자인 변경

❗ 그 동안 프로젝트를 해오면서 <input type=file>을 디자인 변경없이 사용해왔는데 

다른곳 디자인을 바꾸면서보니 오늘 뭔가 수수해보이기 시작했습니다. 그래서 한번 바꿔봤습니다!

 

 

 

 

🔍 방법

---

1. file 타입의 input을 만들어주는데 화면에서 보이지 않게 'display:none' 합니다.

<input type="file" id="u_profile" style="display: none;">

 

 

2. 그 다음 줄 코드로 아래 코드작성합니다. (디자인은 제가 만들어놓은걸 적용할게요)

  -  <a> : 파일을 업로드시에 파일 경로를 보여줍니다.

  - <input type="button"> : 문서(현 파일)안에서 id가 u_profile인 걸 클릭한다.

    (즉, 이걸 이 button을 누르면 display를 감춰놓은 <input type="file" id="u_profile">가 클릭된다.)

<a id="fn" style="text-align: right;"></a>
<input type="button" onclick="document.all.u_profile.click();" class="btn btn-outline-warning my-1 searchAddr" value="사진업로드">

 

 

3. 아래와 같이 JavaScript를 작성한다.

  - <input type="file" id="u_profile">에 변화가 일어나면 u_profile의 값을 id가 fn인 a태그에 그 값을 써준다입니다.

$(function() {
	$('#u_profile').on('change', function() {
		let fileName = $('#u_profile').val();
		$("#fn").text(fileName);
	})
})

 

 

4. 작성해둔 코드 바탕으로 웹사이트를 실행해서 사진업로드를 누르고

 

 

5. 파일을 선택하면

 

 

6. 이렇게 선택한 파일의 경로가 보이게 됩니다.