javascript

JavaScript를 이용하여 input type=file 버튼을 다른 버튼으로 대체해보기

소화자/ editor

  • 4 comments
  • 4,660 views
  • 2017년 12월 3일

시작하기 전에 html문서에 input type 태그로 넣은 내장객체들은 브라우져 제작사의 의존성을 가져서 각 브라우져마다 조금씩 다른 모습을 가진 것이 때론 맘에 가시가 됩니다. 특히 input type=file 버튼은 파일 선택창을 여는 기능까지 가지고 있어 더욱 크로스 브라우져 스타일링에 신경쓰게 되는 버튼입니다. 그래서 오늘은 input type=file 버튼을 css의 display=”none”으로 완전히 화면에서 감추고, 맘대로 스타일링할 수 있는 다른 […]

시작하기 전에


html문서에 input type 태그로 넣은 내장객체들은 브라우져 제작사의 의존성을 가져서
각 브라우져마다 조금씩 다른 모습을 가진 것이 때론 맘에 가시가 됩니다.

특히 input type=file 버튼은 파일 선택창을 여는 기능까지 가지고 있어 더욱 크로스 브라우져
스타일링에 신경쓰게 되는 버튼입니다.

그래서 오늘은 input type=file 버튼을 css의 display="none"으로 완전히 화면에서 감추고,
맘대로 스타일링할 수 있는 다른 button(div등 뭐로 만들어도 괜찮습니다.)을 화면에 넣어,
해당 버튼 클릭시 숨겨놓은 input type=file 버튼이 클릭된 것 처럼 동작하도록
강제 클릭 이벤트를 발생시키는 방식으로 input type=file 버튼을 대체하는 방법을
알아 보겠습니다.

서버단에서Apache+PHP로 확인한 결과  서버단에도 영향이 없었고,
현재 사용하고 있는 크롬,파이어폭스,사파리에서도 잘 동작하였습니다만
OLD버젼의 브라우져는 환경상 일일이 확인하지 못했습니다.

조금 손이 더 가는 방법이긴 하지만   CSS로 input type=file 에서 버튼 스타일 바꾸기 를 참고 하셔도 좋습니다.
보통 CSS로도 되고 자바스크립트로도 되면 CSS의 사용을 더 권장하는 편입니다.

전 자바스크립트가 더 편합니다. ^^

 

그럼 달려 볼까요~~

실행 동작 확인하기


아래에서 까만바탕의 대체버튼을 눌러서 파일 선택해보시면,
input type=file 버튼이 동작됨을 확인하실 수 있으실 겁니다.
input type=file과 까만바탕의 대체버튼 이외의 것은 제가 테스트목적으로
넣은 것이니, 꼭 필요한 것은  아닙니다.

HTML5AROUND.COM on html5around.com

 

동작 원리 설명


원리는 위에서도 잠깐 말씀드렸습니다만, 생각외로 간단합니다.
대체버튼을 클릭하면,input type=file 버튼에 클릭이벤트를 강제로 발생시켜 주는 것입니다.
곧 대체버튼 클릭을 input type=file 버튼 클릭에 연결시키는 게 되는 것입니다.

 

사용법


-. form 태그안에 input type=file 버튼을 넣고 css의 display="none"으로
존재는 하지만 없는 것처럼 완전히 감춰줍니다.
-. 이제 button이든 div이든 대체할 무엇인가를 html문서에 만듭니다.
마음껏 스타일링 합니다.
-. 대체버튼의 클릭이벤트시에 함수 eventOccur("inupt type=file의 id",'click')을 불러줍니다.
끝!

 

eventOccur함수 설명


모질라 디벨로퍼 네트워크 의 내용을 참조하여  제가 만들어 본 함수입니다.
간단히 설명드리면, 브라우져가 fireEvent 메소드를 지원하면, 바로 fireEvent 메소드를 이용하여
onclick 이벤트를 발생시킵니다.

만약 브라우져가 fireEvent 메소드를 지원하지 않으면, document.createEvent 메소드를 이용하여
mouseEvent를 만들고, initEvent 메소드로 속성을 정해주고, dispatchEvent 메소드를 이용하여
이벤트를 발생시키는 로직입니다.
혹시 몰라 이벤트 발생 실패시 console에 로그를 남기도록 하였습니다.

 

마무리


혹시 만약 이해가 조금 어려우시더라도 아래 소스를 템플릿으로 활용하시어 필요한 부분만
수정하시면 사용에는 큰 어려움이 없으리라 생각됩니다.

이제 제약없이 맘껏 스타일링을 즐기십시오~~

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title> HTML5AROUND.COM</title>
<style>
#orgFile {
 display:none;
}
#newFile {
 background-color:black;
 color:white;
 cursor:pointer;
}
</style>
<script>
/**이벤트 발생 (크롬,파이어폭스,사파이어 OK!) **/
function eventOccur(evEle, evType){
 if (evEle.fireEvent) {
 evEle.fireEvent('on' + evType);
 } else {
 //MouseEvents가 포인트 그냥 Events는 안됨~ ??
 var mouseEvent = document.createEvent('MouseEvents');
 /* API문서 initEvent(type,bubbles,cancelable) */
 mouseEvent.initEvent(evType, true, false);
 var transCheck = evEle.dispatchEvent(mouseEvent);
 if (!transCheck) {
 //만약 이벤트에 실패했다면
 console.log("클릭 이벤트 발생 실패!");
 }
 }
}

/** 대체버튼 클릭시 강제 이벤트 발생**/
function check(){
 eventOccur(document.getElementById('orgFile'),'click');
 /* alert(orgFile.value); 이벤트 처리가 끝나지 않은 타이밍이라 값 확인 안됨! 시간차 문제 */
}
</script>
</head>
<body>
<h3 style="color:blue">input type=file 대체버튼 만들기</h3>
<hr />
 <form action="" method="post" enctype="multipart/form-data">
 <input type="file" multiple id="orgFile" name="userfile">
 <button id="newFile" onclick="check()">
 마음대로 스타일링 할수 있는 나만의 <br>input type file 대체버튼
 </button><br><br>
 <input type="submit" value="summit버튼">
 </form>
</body>
</html>

질문이나 댓글 주시면, 모르는 건 모른다고 최대한 빨리 답변 드리겠습니다 🙂

이 글이 누군가에겐 조금이나마 도움이 되었으면 하는 작은 바람입니다.

소화자

존재를 드러내지 않고 무림의 배후를 조정하는 전설로만 전해지는 무엇이든 소화하는... 갑 오징어~^-^

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
소화자이런일이..francis Recent comment authors
newest oldest most voted
francis
Guest
francis

대체 버튼을 같은 Form 안에 넣으면 동작을 하지 않는데 어찌하나요?

이런일이..
Guest
이런일이..

허허~~ 이런 일이 안되는 것으로 계속 알고 있었는데.. 이게 되네요~~
배우고 갑니다. 감사합니다.