[JS] 이미지 파일버튼


0. 라이센스 (License)
이 코드의 라이센스는 다음과 같은 원칙을 따릅니다.

  • 소스 파일내의 저작권 주석을 삭제하지 않는 조건이라면 어떻게 사용하던지 상관없습니다.
  • 암호화 되어있지 않고 정리된 원래의 소스는 유료입니다.
  • 유료로 구매한 소스는 원저작자의 동의없이도 상업적인 사용, 수정, 재배포 등이 가능합니다. 단, 재배포 시에는 원저작자의 라이센스를 유지해야합니다.
  • 원본 소스의 금액은 1,000원입니다.
  • 저작자는 이 소스의 사용으로 인한 손해, 장애 등에 대해 책임지지 않습니다. 소스에 대한 유지, 보수의 의무를 가지지 않습니다.

유료이긴 하지만, 제 바램은 가급적이면 그냥 무료 형태로 사용해주시라는 겁니다. 어차피 성능상의 문제가 있는 것도 아니고, 크게 개선할 사항이 있다면 저에게 요청하면 되니까 그냥 무료 형태로 써주시기 바랍니다(이체하려면 수수료가 600원이나 합니다).
상업적인 이익이 목적이 아니기 때문에 버스비 정도의 가격이지만, 그래도 유료 라이센스를 취하는 이유는 제 블로그에 있는 라이센스에 대한 생각을 읽어보시기 바랍니다.

1. 개요 (Overview)
이미지만으로도 쉽게 파일버튼을 만들어주는 스크립트입니다.

    void gonyFileButton(object Image, string HTML_Object_Name[, string Text_Handler_Control_Id])
  • Image : 파일버튼이 되는 이미지 객체입니다. 아주 특수한 경우를 제외하고는 꼭 this로 입력합니다.
  • HTML_Object_Name : 파일입력 컨트롤의 name 속성값을 정합니다. <input type="file" name="***"> 에서 ***에 해당하는 부분입니다.
  • Text_Handler_Control_Id : 선택된 파일의 값을 표시할 컨트롤의 id를 지정합니다.

2. 사용법 (Usage)
우선, 파일버튼 대신으로 쓸 이미지를 만듭니다. 엽기적인 사이즈(e.g. 320x240)로 만들 경우, 파일버튼이 제 기능을 못할 수도 있습니다.
이미지를 만들었으면 버튼이 눌렸을때의 이미지를 press 라는 속성으로 지정해줍니다(생략가능). 만일 원래의 이미지 경로와 같은 경로에 있으면 파일이름을 적어주는 것만으로도 충분합니다.




그 다음에 onload 이벤트를 작성하고 다음과 같은 식으로 함수를 지정해줍니다. 예제에서는 file1이라는 이름을 가진 text field 혹은 다른 객체가 필요합니다.


이걸로 끝입니다.

3. 사용예제 (Example)



텍스트 입력박스의 아이디를 지정하면 파일명을 볼 수도 있습니다.

텍스트 입력박스의 아이디를 지정하면 파일명을 볼 수도 있습니다.



텍스트 입력상자가 아닌 것에도 값은 들어갑니다.

텍스트 입력상자가 아닌 것에도 값은 들어갑니다.


프레스 이미지나 값을 핸들링할 객체는 없어도 됩니다.

프레스 이미지나 값을 핸들링할 객체는 없어도 됩니다.

4. 호환성 (Comportability)
이 스크립트가 잘 작동하는 것으로 알려진 웹브라우저를 표시합니다. 특별한 언급이 없으면 아래 목록의 브라우저의 상위 버전에서도 이 스크립트는 정상작동합니다. 다른 버전이나 다른 브라우저에서 테스트해보신 분은 알려주시기 바랍니다.

  • Microsoft Internet Explorer 6.0 SP2
  • Mozilla Firefox 1.0.4

[download]http://mygony.com;/wp-content/uploads/2005/06/231200.zip;소스,메뉴얼,사용예제[/download]

  1. 공부좀 하고자 소스를 구매하고 싶은데요. ^^...
    연락을 어디로 드려야 할지 몰라서~

  2. styx// 정말 구매하시게요? 그럴 사람이 있으리라곤...
    우선은 원본소스를 조금 더 개선해놓고, 주석도 달아놓았습니다만... 음... 정말로 팔게 될 줄은 몰랐는데... 그냥 "노력은 공짜가 아니다"를 알리는게 목적이었거든요.

    우선은 메일 주소 같은거 남겨주시면 연락드리겠습니다.

  3. 근데.. 소스가 너무 쉽게 암호가 풀리네요..
    (암호를 풀었을뿐 그외 딴짓은 안합니다, 당근..)
    작은 액수에 판매할지라도 일단 판매하는 것이면 제대로 해야한다고 봅니다.

  4. 고니님, 다운로드 부분 " 이미지_파일버튼_배포용.zip (4.5 KB)"
    있잖아요. 거기에 스타일로 cursor:hand 옵션이나 롤오버 효과 좀 주세요.
    홈페이지 다 좋은데, 옥의 티 군요. ㅋㅋ 오늘 비 겁나 오는데 조심하셈.

  5. 위의 onload="gonyFileButton(this,'upfile')" 이부분은
    어떤 경우에는 한번더 클릭해야(1:js로딩/2:작동) 작동하는경우가 있습니다.
    밑에 부분으로 바꾸면 그런 부분이 해결됩니다.
    onmouseover="gonyFileButton(this,'send_upFile','send_file')" onClick="gonyFileButton(this,'send_upFile','send_file')"
    좋은소스 감사하고 팁입니다

  6. 고니님 덕분에 잘 쓰고 있습니다^^
    근데 한가지 아쉬움 점이 있어서 이렇게 글씁니다.
    웹페이지에서 이미지 파일을 업로드할 경우가 많은데.. 많은 사이트에서 미리보기를 지원하자나요.. 그래서 여기서도 이미지 파일 업로드일 경우 미리보기를 지원해 줬으면 해서요^^

댓글을 남겨주세요

This site uses Akismet to reduce spam. Learn how your comment data is processed.