input type의 file을 디자인할수 있는 방법 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 폼 관련 > input type의 file을 디자인할수 있는 방법 상세정보

클라우드태그

javascript

HTML

PHP

Api

CSS

ASP

mysql

2022

Slide

jquery

메일링

모듈

갤러리

현재접속자 명

input type의 file을 디자인할수 있는 방법

해피팀

네티즌

소스분류

폼 관련

다운로드 횟수

259 회

간단설명

input tyle="file"은 파일을 첨부하기 위한 용도의 소스로 버튼에 대한 CSS 디자인을 입힐수가 없습니다. 하여 본 스크립트를 이용하여 이미지나 스타일을 입힌 버튼으로 대처할 수 있습니다.

평가하기

본 소스를 반영하기전 상위에

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

라는 jquery 를 반영해두셔야 합니다.

이와같은 <input tyle="file"> 소스는 css나 이미지 버튼으로 디자인을 입힐수가 없습니다.

하여 본 스크립트를 기본으로 해당 input 영역에 이미지를 얻혀놓는 방식으로 디자인을 할수 있는 조건을 만들어줍니다.

스크립트 소스내

"position": "absolute",
   "top": "15px",
   "right": "0px",
   "width": "81px",
   "height": "30px",
   "cursor": "pointer",
   "opacity": "0.0"

라는 영역으로 버튼이미지에 덮여질 file 첨부 영역을 잡아주셔야 하며,

버튼 영역에 반영될 이미지는 반드시 이미지 사이즈를 기입해주셔야 합니다.

<input type="image" class="button" width="81" height="25" src="btn_reg.gif" title="파일 올리기" />

위 소스를 반영하여 모든 input type="file" 항목에 반영할 수 있습니다.