input type=file 버튼을 다른 버튼으로 대체해보기

input type=file 버튼을 다른 버튼으로 대체해보기

기본 파일 버튼은 너무 단조롭고 스타일이 안좋은것 같아서 어떻게 하면 CSS를 먹일 방법을 많이 찾아보았다. 자바스크립트를 이용하거나, 레이블을 줘서 하는 방법들 여러가지 방법들이 있지만, 가장 쉬운 방법을 소개하려고 한다

<form action="upload" id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" style="display:none"/>
</form>

file 타입의 태그를 style="display:none"로 하여 안보이게 한후,

<div class="button" onclick="onclick=document.all.file.click()">사진추가</div>

CSS로 만든 div를 입히고 onclick="onclick=document.all.file.click()" 을 이용하여 파일버튼을 대체할수 있다.

어떻게 보면 간단한 방법이면서도 쉬운원리를 이용하였다.