input file 커스텀 파일첨부 기능

<label for="attached">
	<input class="file_real" id="attached" type="file"> //실제 파일 첨부 기능
	<input class="file_fake" type="text" placeholder="* 10MB 미만의 jpg, png, bmp, gif만 첨부 가능" readonly tabindex="-1"> //사용자에게 보여지는

	<span class="btn">첨부하기</span>
</label>

 

 

 

 

label { position: relative; display: block; height: 60px; cursor: pointer; }
.file_real { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; width: 0; height: 0; }
.file_fake { position: absolute; top: 0; left: 0; z-index: 2; padding: 0 calc(134px + 37px) 0 37px; width: 100%; height: 100%; font-size: 16px; border: 2px solid #111; border-radius: 30px; pointer-events: none; user-select: none; touch-action: none; }

 

 

 

$('.file_real').on('change', function() {
	var files = $(this)[0].files[0];
	var fake = $('.file_fake');
	
	fake.val('');
	if ( files !== undefined ) {
		fake.val(files.name);
	}
});

 

 

https://jsfiddle.net/aw71qf0b/

Edit fiddle - JSFiddle - Code Playground