input type file 버튼 모양변경

input type file 버튼 모양변경

 html component <input type="file" /> 버튼 을 꾸미는 방법은 이미 기존에 널리 퍼져있습니다만
조금 더 간결하고 직관적이게, 스크립트 미동작 환경을 고려해서 만들었습니다.


---------------------------------------- script 설정 ----------------------------------------
<script type="text/javascript" src="./FileButton.js"></script>
<script type="text/javascript">
var myFileButton = new FileButton("imageswap", "imagesrc"); //new FileButton("true 값을 줘야 하는 사용자 설정 attribute name", "꾸며질 이미지 url")
window.onload = function () {
    //myFileButton.run(); //문서로딩 후 한꺼번에 바꿈
}
</script>
---------------------------------------- script 설정 ----------------------------------------


해당 FileButton 객체는 3가지 기능을 지원합니다.

swap: file 을 object 로 인식하여 꾸밉니다.
write: document.write() 메소드 처럼 html 을 그대로 넣어 전달합니다.
run: 문서 전체 input 노드를 순회하며 설정과 맞는 file component 를 꾸밉니다.

최종적으로 파일버튼을 꾸미는 메소드는 swap() 메소드 이며,
객체생성시 두번째 매개변수
"꾸며질 이미지 url" 은 해당이미지가 로딩되는 즉시 꾸며질 input type="file" component 의 width, height 를 자동으로 잡아주며,
잘못된 주소이거나 이미지가 로딩되지 않으면 해당 파일버튼은 변환되지 않습니다.

페이지 로딩자체가 큰 경우가 아니라면 문서 로딩 후 한번에 run() 이 좋겠지만,
문서로딩도 약간 딜레이가 있고, 파일찾기 버튼도 여러개가 있을 경우 write() 형식으로 해주는 것이 좋을것 같습니다.
흔하진 않지만 script 옵션을 꺼 놓은 유저에게는 순수 html component 를 보여주어야 하기때문에 이럴 경우엔 그냥 write() 메소드 보다는 swap() 메소드를 쓰는것이 좋겠구,
각각 장점과 단점이 있으며 선택해서 쓰시면 될 것 같습니다.