[CSS] 파일 업로드 커스텀하기 - custom input [type="file"]

파일업로드 커스텀 - reset

파일업로드 폼필드는 브라우저마다 디자인도 다르고, 모양새도 보기 좋지 않기때문에 커스텀을 해서 사용합니다.

하지만 다른 input 과는 다르게 css만으로는 커스텀이 불가능하기때문에

js와 함께 사용해주셔야 합니다.

자세한 코드는 아래를 확인해주세요 :)

 

 

[html]

<div class="file_wrap">
	 <div class="filebox">
		<label for="self_intro">파일 찾아보기</label>
        <input type="file" id="self_intro" class="upload-hidden">
        <input class="upload-name" disabled="disabled">
        <a href="#" class="file_reset">파일 지우기</a>
     </div>
</div>

 

 

[css]

/* 파일 업로드 */
.file_wrap{position: relative;}
.file_wrap:after{content: '';display: block;clear: both}
.filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
.filebox  > div {float: left}

.filebox label {
	display: inline-block;
	padding: 7px 10px;
	color: #ff00e4;
	font-size: 1.4rem;
	line-height: normal;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #ff00e4;
	border-bottom-color: #e2e2e2;
	border-radius: .25em;
    overflow: hidden

}

/* named upload */
.filebox .upload-name {
	display: inline-block;
	padding: 6px 10px;
    margin-left: 10px;
	font-size: inherit;
	font-family: inherit;
	line-height: normal;
	vertical-align: middle;
	background-color: #fff;
  border: 1px solid #c7cee1;
width: calc(100% - 170px);
  border-bottom-color: #c7cee1;
  border-radius: .25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
    overflow: hidden
}

.file_reset{background: url(../images/sub/reset_close.png) no-repeat center #fff;display: block;width: 30px;height: 28px;text-indent: -9999px;position: absolute;right: 3px;top: 50%;transform: translateY(-50%)}

 

[js]

	//파일 업로드
	var fileTarget = $('.filebox .upload-hidden');

	fileTarget.on('change', function () {
		if (window.FileReader) {
			var filename = $(this)[0].files[0].name;
		} else {
			var filename = $(this).val().split('/').pop().split('\\').pop();
		}

		$(this).siblings('.upload-name').val(filename);
	});
	$(".file_reset").click(function () {
		$(this).parent().find('.upload-name').val('');
	});


	var wrapper = $(".input_fields_wrap"); //Fields wrapper
	var add_button = $(".add_field_button"); //Add button ID
	var x = 1; //initlal text box count
	$('.file_wrap_inbtn .add_field_button').click(function (e) {
		e.preventDefault();
		x++;
		$('.file_wrap_inbtn').parent().append('<div class="file_wrap_inbtn"><div class="file_wrap mt_10"><div class="filebox"><div class="btn_wrap"><label for="filenew' + x + '" class="btn_line btn_pink_line02 file_btn">파일 찾아보기</label></div><input type="file" id="filenew' + x + '" class="upload-hidden"><input class="upload-name" disabled="disabled"><a href="#" class="file_reset">파일 지우기</a></div></div><div class="btn_wrap"><a href="javascript:void(0)" class="btn_line btn_pink_line02 remove_field_button">- 삭제</a></div></div>');


		var fileTarget = $('.filebox .upload-hidden');

		fileTarget.on('change', function () {
			if (window.FileReader) {
				var filename = $(this)[0].files[0].name;
			} else {
				var filename = $(this).val().split('/').pop().split('\\').pop();
			}

			$(this).siblings('.upload-name').val(filename);
		});

		$('.remove_field_button').on('click', function (e) {
			$(this).parent().parent().remove();

		});
	});

 

 

[결과화면]