자바스크립트 file input 커스텀, placeholder/value 지정하기

file를 커스텀해보자.

file input과 readonly input을 label로 묶어 구현한다.

 

 

<label onClick="filesToFackFilesInput(this)">
<input class="file_real" type="file">
<input class="file_fake" type="text" placeholder="안내" readonly tabindex="-1">
<span class="btn">첨부하기</span>
</label>

function filesToFackFilesInput(label){
let file_real = label.children[0];
let file_fake = label.children[1];
file_real.addEventListener("change", function () {
let files = this.files[0].name;
console.log(files);
file_fake.value = files;
});
}

이후 .file_real을 display-none해주면 완료.

 

 

 

 

span태그와 css를 추가해 기존에 기획했던 디자인과 통일해보자.

아래의 main.png가 value로 들어간 input이 커스텀된 file input 이다.

.filesToFackFilesInput span{
    background: #f8f9fa;
    font-size: 13px;
    width: 117px;
    border: 1px solid #ddd;
    border-right: 0;
    line-height: 31px;
    text-align: center;}

 

 

바뀐 레이아웃에 맞도록 스크립트(객체선택 순서)등을 간단히 수정한다.

<label onClick="filesToFackFilesInput(this)" class="d-flex w-100 filesToFackFilesInput">
	<input class="file_real d-none"">
	<span>파일선택</span>
	<input class="file_fake form-control rounded-0" type="text" placeholder="" readonly tabindex="-1">
</label>

function filesToFackFilesInput(label){
	let file_real = label.children[0];
	let file_fake = label.children[2];
	file_real.addEventListener("change", function () {
		let files = this.files[0].name;
		console.log(files);
		file_fake.value = files;
	});
}