input type="file" 디자인

파일 첨부 기능을 가진 input type="file" 은 브라우저마다 스타일 다르고

기본적으로 가지고 있는 스타일을 변경하는게 힘듭니다.
그렇기 때문에 기존 input 태그는 숨기고 label 태그의 for 속성을 이용해서 디자인을 할 수 있습니다.

 

파일 업로드 스타일 변경

html

---

	<div>
		<div class="file_box">
			<input class="upload_name" value="이미지를 업로드 해 주세요." disabled="disabled">
			<label for="input_file"><img src="img_camera.png" alt="파일 찾기"></label> 
			<input type="file" id="input_file" class="file_hidden"> 
		</div>
	</div>

---

 

css

 

---

	
.file_box{
	position:relative;
	margin-top:30px;
	font-size:0;
}

.file_box input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}

.file_box label {
	display: inline-block;
	line-height: 0;
	margin-left: 5px;
	margin-top: -3px;
	color: #999;
	vertical-align: middle;
	background-color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #0fb5bf;
	text-align:center;
	box-sizing:border-box;
	background:#fff;
}

/* 파일 이름 */
.file_box .upload_name {
	display: inline-block;
	padding: 0 20px 0 50px;
	width: calc(100% - 80px);
	height:40px;
	line-height:40px;
	vertical-align: middle;
	background-color: #ffffff;
	border: 1px solid #ddd;
	-webkit-appearance: none; /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
	font-size: 14px;
	font-weight: 500;
	color: #a8a8a8;
	box-sizing:border-box;
}

/* 이미지 미리보기 */
.file_box .upload-display {
    position: absolute;
    left: 12px;
    top: 9px;
    width: 24px;
    height: 24px;
}

.file_box .upload-display img {
	display: block;
	max-width: 100%;
	width: 100% \9;
	max-height:100%;;
}

---

javascript

---

 

/* 파일명 가져오기 start */
	var fileTarget = $('.file_box .file_hidden');
	
	fileTarget.on('change', function(){
		if(window.FileReader){
			// 파일명 추출
			var filename = $(this)[0].files[0].name;
		} 
		else {
			// Old IE 파일명 추출
			var filename = $(this).val().split('/').pop().split('\\').pop();
		};

		$(this).siblings('.upload_name').val(filename);
	});
	/* 파일명 가져오기 end */

	/* 파일 이미지 가져오기 start */
	var imgTarget = $('.file_box .file_hidden');
	
	imgTarget.on('change', function(){
		var parent = $(this).parent();
		parent.children('.upload-display').remove();
		
		if(window.FileReader){
			//image 파일인지 검사
			if (!$(this)[0].files[0].type.match(/image\//)) return;
			
			var reader = new FileReader();
			reader.onload = function(e){
				var src = e.target.result;
				console.log(e);
				console.log(e.target);
				parent.prepend('<div class="upload-display"><img src="'+src+'" class="upload-thumb"></div>');
			}
			reader.readAsDataURL($(this)[0].files[0]);
		}
		else {
			$(this)[0].select();
			$(this)[0].blur();
			var imgSrc = document.selection.createRange().text;
			parent.prepend('<div class="upload-display"><img class="upload-thumb"></div>');

			var img = $(this).siblings('.upload-display').find('img');
			img[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enable='true',sizingMethod='scale',src=\""+imgSrc+"\")";
		}
	});
	/* 파일 이미지 가져오기 end */

---

감사합니다.