[해피CGI][cgimall] 파일업로드 인풋 디자인 Custom input="file" styling

 

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;
};