[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. 320×240)로 만들 경우, 파일버튼이 제 기능을 못할 수도 있습니다.
이미지를 만들었으면 버튼이 눌렸을때의 이미지를 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]

Leave a Reply