시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 기타효과 > 파일업로드 인풋 디자인 Custom input="file" styling 상세정보
사이트등록
현재접속자 새로고침
파일업로드 인풋 디자인 Custom input="file" styling
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 기타효과
다운로드 횟수 1 회
간단설명 css 와 js 로 파일업로드 인풋박스 디자인을 변경하는 소스입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기



css 와 js 로 파일업로드 인풋박스 디자인을 변경하는 소스입니다.

기존의 인풋박스를 투명하게 처리하고 해당 부분에 버튼을 올려 디자인합니다.

스크립트를 이용하여 파일주소를 출력합니다.



css 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

 

body{
  background:#f1f1f1;
}

.container{
  width:400px;
  padding:50px 20px;
  background:#fff;
}
 
h1{
  margin-bottom: 40px;;
}

.file-upload {
 position: relative;
 overflow: hidden;

 border-radius: 3px !important;
 background: #ff0000;
 text-transform: uppercase;
 font-size: 13px;
 border:none !important;
 box-shadow: none !important;
 color: #fff !important;
 text-shadow:none;
 padding: 5px 10px !important;
 font-family: Arial, sans-serif;
 display: inline-block;
 vertical-align: middle;

}
.file-upload input.upload {
 position: absolute;
 top: 0;
 right: 0;
 margin: 0;
 padding: 0;
 font-size: 20px;
 cursor: pointer;
 opacity: 0;
 filter: alpha(opacity=0);
}
#fileuploadurl{
 display: inline-block;
 border:none;
 vertical-align: middle;
 background: none;
 box-shadow: none;
 font-size: 11px;
 padding-left: 0;
  width:220px;
 padding-right: 0;
}

 



html

<div class="container">
  <h1>Custom File Upload Styling</h1>
  <div class="file-upload btn btn-primary">
     <span>BROWSE</span>
     <input type="file" name="FileAttachment" id="FileAttachment" class="upload" />
 </div>
 <input type="text" id="fileuploadurl" readonly placeholder="Maximum file size is 1GB">
</div>
 


js

document.getElementById("FileAttachment").onchange = function () {
    document.getElementById("fileuploadurl").value = this.value;
};
 

네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 28469860 보이는 도배방지키를 입력하세요.