[JQuery] input file 파일 업로드 시 이미지 미리보기

■ JQuery input file 파일 업로드 시 이미지 미리보기

---

1. 첨부파일 (이미지 파일만 업로드 가능하게 구현)

2. 파일 업로드 시 이미지 미리보기 영역 노출 (파일이 존재하지 않을 경우 미리보기 영역 미노출)

<!-- 첨부파일(이미지파일만 업로드가능) -->
<input type="file" id="u_file" name="u_file" accept="image/*">

<!-- 이미지 미리보기 영역 -->
<div id="imgViewArea" style="margin-top:10px; display:none;">
	<img id="imgArea" style="width:200px; height:100px;" onerror="imgAreaError()"/>
</div>

<script type="text/javascript">
	// 콘텐츠 수정 :: 사진 수정 시 이미지 미리보기
	function readURL(input) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.onload = function(e) {
				$('#imgArea').attr('src', e.target.result); 
			}
			reader.readAsDataURL(input.files[0]);
		}
	}

	$(":input[name='u_file']").change(function() {
		if( $(":input[name='u_file']").val() == '' ) {
			$('#imgArea').attr('src' , '');  
		}
		$('#imgViewArea').css({ 'display' : '' });
		readURL(this);
	});

	// 이미지 에러 시 미리보기영역 미노출
	function imgAreaError(){
		$('#imgViewArea').css({ 'display' : 'none' });
	}
</script>