강좌 전 태오의 잡담>

이 강좌는 Danny(전성대) 님께서 제공하는 유용한 팁들의 퍼레이드 랍니다. ^^

참. 전성대님의 메일주소는 junsd@korea.com 이니까요.
강좌와 관련하여 추가적으로 궁금한 부분이 있거나 하시면 메일로 문의하세요 ^^

전성대 입니다. 하하하.. 오늘은 비가오네요. 곧 장마가 오려나봐요.

가끔 개발을 하다보면 프로그램 로직도 중요하지만 상사의 입장에서 볼 때, 이쁘게 꾸미는것 또한 정말 중요한 때가 있습니다. 예를 들어서 주문서, 혹은 게시판 글쓰기 폼을 디자이너가 이쁘게 만들었다고 생각해보세요. 버튼도 이쁘게, 색상도 이쁘게....

근데 파일 업로드시에 항상 자동으로 만들어지는 "찾아보기" 버튼을 이미지로 바꿀수는 없을까? 란 주문들은 꽤나 자주 들어오는 주문입니다. input type= file 인경우에는 무조건 찾아보기 버튼이 붙지요

다른걸로 바꿀방법? 없습니다.! < /p> < p> 단, 편법으로는 가능합니다.

현재에 보이는 input type=file 부분을 Style을 이용하여 안보이게 숨겨놓고, 일반 input type=text를 하나 폼에 넣고, 그 옆에 원하는 이미지를 놓습니다. 이미지의 onClick 이벤트 부분에 javascript로 아까 숨겨두었던 input type=file 부분의 name을 이용해서 열어준 다음에 사용자가 파일을 고르게 되면 그 값을 보여주기 위해서 다시 숨겨져있던 입력폼의 값을 새로 만들었던 text 형식의입력폼에 집어 넣으면 됩니다.

말이 좀 복잡한데요. 소스를 보시면 좀 이해가 쉽구요.... 그래도 이해가 안가면, 직접 코드를 실행해 보면 이해가 쉽습니다.

<script>     function file_browse()     {         document.form.file.click();         document.form.text1.value=document.form.file.value;     } </script> <p>     <form name="form">         <input type="file" name= "file"style="display='none';">         <input type="text" name="text1">     </form> <p><a href="javascript: file_browse()">파일찾아보기</a></p>

다음은 이 코드를 실행시켜 본 모습입니다. 즉, 다음과 같이 동작한다는 것이죠

실제로 파일은 input type="file" 컨트롤을 통해서 기존처럼 지정되는 것이지만... 단지, 사용자의 눈에 보여줄테만 그렇지 않게 보여주는 것입니다. 일단 소스를 구동시켜 보시고 나면 이해가 되실 겁니다.

어떻게 보면 asp하고는 관계가 없을것 같지만 이 Form 을 처리하는데에 있어 asp를 이용하니... 상관이 없다고는 할수가 없겠지요^^(순 억지인가요..)

asp 페이지에서 받을때엔 사용하시는 업로드 컨포넌트를 사용해서 UploadCom("file")과 같은 식으로 받으면 되겠네요. 그리고, 소스 중에서 "파일찾아보기" 란 텍스트 대신 이미지를 넣으면 되겠구요.

좋은 하루 되세요

강좌 목록으로..