UI Laboratory

UI 개발을 위한 레퍼런스

File Upload

설명
예제-1은 글등록시 파일 첨부 태그인 <input type="file" />을 이용하여 파일을 첨부할 경우 버튼은 css로 스타일을 입힐 수 없으므로 보통 아래와 같은 스크립트를 이용하여 이미지나 스타일을 입힌 버튼으로 대체한다.
주의할 점은 대체하고자 하는 이미지나 버튼에 반드시 width값을 명시해야 하며 이때 스크립트에서 이 width값을 이용하여 <input type="file" />의 width값으로 설정하고 투명도를 0으로 하여 정확히 클릭할 수 있는 영역을 만들게 된다.
fn_fileUpload();

예제-1

첨부파일

HTML

				<fieldset class="attach">
					<legend>첨부파일</legend>
					<input type="text" class="ipt" id="file" style="width:200px;" />
					<input type="image" class="button" width="79" src="/jquerylab/images/btn/btn-choose-file.gif" title="파일 올리기" />
					<input type="file" name="file" id="upload" />
				</fieldset>
				<script type="text/javascript">fn_fileUpload();</script>
			

CSS

				<style type="text/css">
					/* file upload */
					fieldset.attach {position:relative; display:inline-block; *display:inline;}
						fieldset.attach * {vertical-align:middle;}
				</style>
			

Javascript

				<script type="text/javascript">
					function fn_fileUpload(){
						var $img = $('fieldset.attach input[type=image]');
						var img_width = $img.attr('width');
						var $file = $('fieldset.attach input#upload').css({
							"position": "absolute",
							"top": "0px",
							"right": "0px",
							"width": img_width+"px",
							"cursor": "pointer",
							"opacity": "0.0"
						});

						$file.bind('change',function(){
							var filename = $(this).val();
							$('fieldset.attach input#file').attr("disabled","disabled").val(filename);

						});
					};
				</script>