input type="file" 스타일 변경하기

- 문제점 -

<input type="file" />은

파일 선택 버튼과 파일명이 출력되는 부분이 하나로 되어있기 때문에

스타일을 변경하고자 해도 생각한대로 잘 안된다.

나한테 왜 그러냐...

 

이럴 경우 <label>을 통해 스타일링을 해주면 된다!

 

1. label과 input을 연결한다.

2. input을 hidden 처리한다.

3. 스타일을 label에 적용한다.

<div>
    <label for="add-img">
        <img id="img-btn" src="#" alt="이미지 첨부"/>
    </label>
	<input id="add-img" type="file" accept="image/jpeg, image/gif" onchange="addImg()" hidden/>
    <span id="img-name"></span>
</div>

 

 

나는 추가적으로 파일명을 노출 시키고 싶어서 이 부분은 스크립트로 작동되게 했다.

jQuery만 썼더니 자바스크립트로 어떻게 작성해야할지 너무 헷갈린다..^_ㅠ

(리액트 공부 전 다시 자바스크립트부터 공부해야겠다.)

 

 

<input>에 변화가 있을 경우 <span>에 파일명을 노출 시킬 것이라

<input>에 onchange로 기능을 주었고

스크립트는 아래와 같이 작성해주었다.

function addImg(){
  var fileName = document.getElementById("add-img").value;
  document.getElementById("img-name").innerHTML = fileName;
}

 

 

- 결과 -

<파일 첨부 전>

<파일 첨부 후>