input[type="file"] 커스텀(custom)하는 방법

input type을 file로 사용할 때 커스텀 하는 방법이다.

 

원래 기존 <input type="file />로 html을 작성했을 때의 모습이다.

 

디자인이 없이 들어간다면 그대로 사용해도 무방하지만 보통 커스텀을 하는 경우가 많기 때문에 아래를 참고하여 사용하면 된다.

 

HTML

<div class="file_wrap">
    <input type="text" class="file_name" value="" placeholder="첨부파일">
    <label for="file">파일 업로드</label> 
    <input type="file" id="file">
</div>

- 우선 input창을 하나 더 만들어 업로드 될 파일 이름이 들어갈 자리를 만든다.

 

CSS

/* 기존 input창 디자인 없애기 */
.file_wrap input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
/* 업로드 인풋창 커스텀 */
.file_wrap .file_name {
    display: inline-block;
    width: 180px;
    height: 32px;
    padding: 0 10px;
    vertical-align: middle;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    color: #999999;
}
/* 업로드 버튼 커스텀 */
.file_wrap label {
    display: inline-block;
    height: 32px;
    width: 100px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    background-color: #32d583;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 5px;
    font-size: 14px;
}

- 디자인에 맞게 커스텀 한 후 스크립트로 업로드 되는 파일 이름 값을 옮겨주면 된다.

 

 

JAVASCRIPT

// 제이쿼리
$("#file").on('change',function(){
  let fileName = $("#file").val();
  $(".file_name").val(fileName);
});

// 자바스크립트
document.getElementById('file').addEventListener('change', function(){
	let fileName = this.value;
    // 파일명만 노출시키고 싶으면 아래 변수로 쓰면 된다.
	let fileName = this.value.split('\\')[this.value.split('\\').length-1];

	document.querySelector('.file_name').value = fileName;
});

---

완성한 모습