INPUT FILE

파일첨부 커스터마이징 예시



실제로 label을 통해서 간접적으로 input type=file을 활성화 하게 되는데, IE7/IE8의 경우 label 태그 안에 img가 있을 경우 label이 제대로 작동하지 않는다. 이미지 대신 배경이미지로 만들거나 아예 이미지를 CSS를 이용해서 만드는 것이 필요하다.


							<p class="attach">
								<span>
									<label for="paper_attached">입사지원서 첨부</label>
									<input type="file" name="" value="" id="paper_attached" />
								</span><br />
								<span>
									<label for="portfolio_attached">포트폴리오 첨부</label>
									<input type="file" name="" value="" id="portfolio_attached" />
								</span>
							</p>			
						

							.attach_sample{padding:20px;padding-bottom:0;border:1px solid #ccc;}
							.attach{padding:0 0 30px 0;}
							.attach span{float:none;display:inline-block;padding:0 0 10px 0;margin:0;}
							.attach span em{margin:0 0 0 10px;}
							.attach label{display:inline-block;width:176px;height:38px;padding:0;margin:0;text-align:center;border:1px outset #ccc;cursor:pointer;vertical-align:middle;line-height:38px;border-radius:5px;color:#696969;}
							.attach input[type=file]{height:0;line-height:0;font-size:0;width:0;margin:0;padding:0;vertical-align:middle;opacity:0;filter: alpha(opacity=0); /* for IE5-7 */-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* for IE8 */}					
						

							(function ($) {	
								$(function(){
									$fileInput = $('input[type=file]', '.attach');
									$fileInput.each(function () {
										var $this = $(this);
										$this.bind("change", function () {
											var $val = $this.val();
											var valArray = $val.split('\\');
											var attachedFile = valArray[valArray.length-1];

											$this.next("em").remove();
											$this.after(''+attachedFile+'');												
										});
									});
								});
							})(jQuery);