파일 업로드 버튼 없애고 꾸미는 방법 (JS)

파일 업로드 버튼 없애고 꾸미는 방법 (JS)

반응형

파일 업로드 버튼 없애고 꾸미는 방법

우리가 태그를 이용하여 파일 업로드 UI를 생성할 때 만나는 문제점이 있다. 바로 웹 브라우저마다 다 input 요소의 기본 디자인이 다르다는 점이다. 또한 이 input 요소를 디자인하는 것 또한 쉽지 않다. 따라서 우리는 기본 input 요소를 숨기고 예쁜 디자인이 적용된 사용자 UI를 생성한 뒤 자바스크립트 이벤트 트리거를 이용하여 기능을 구현하는 방식을 채택할 것이다.

브라우저별로 상이한 디자인

예제 코드

Document 파일선택

페이지 렌더링 결과

위와 같이 코드를 준비한다. input 태그는 실제 파일 업로드 상자이고 span 태그는 우리가 CSS를 적용할 대상이다. 우리는 웹 페이지에서 input 노드가 아닌 span 노드를 선택할 것이기 때문에 아래와 같이 클릭 이벤트를 준비한다.

const fileButton = document.querySelector(".file-button"); fileButton.addEventListener("click", function () { // 실행할 코드 });

span 노드에 클릭 이벤트가 발생하면 실행 될 이벤트 리스너가 준비되었다. 이제 마우스 이벤트를 생성하고 EventTarget.dispatchEvent() 메서드를 사용해 input 노드에 클릭 이벤트를 유발시켜보자.

const fileButton = document.querySelector(".file-button"); const galleryFile = document.querySelector(".gallery-file"); fileButton.addEventListener("click", function () { // 클릭 마우스이벤트 생성 const event = new MouseEvent("click", { bubbles: true, cancelable: true, view: window }); // 위에서 생성한 이벤트를 스팬 노드로 전달 galleryFile.dispatchEvent(event); });

페이지 렌더링 결과

이 상태에서 CSS 적용 대상 텍스트를 클릭하면 파일 선택 상자를 누른 것과 같은 사용자 경험을 할 수 있다. 스크립트 작성이 끝났으니 이제 span 노드를 CSS를 이용하여 꾸미는 일만 남았다. 이 부분은 진행 중인 프로젝트 디자인에 따라 차이가 있겠지만, 기본적인 가이드만 제공하겠다.

.gallery-file { display: none; /* input 노드 숨기기 */ } .file-button { background-color: orange; border: 1px solid black; border-radius: 5px; padding: 5px 10px; cursor: pointer; }

페이지 렌더링 결과

CSS를 적용하여 input 노드를 숨기고 CSS 적용 대상에 스타일을 입힌 모습이다.

반응형

from http://tamagotch.tistory.com/43 by ccl(A) rewrite - 2021-12-26 11:01:23