[자바스크립트] 이미지업로드 미리보기 기능

서버단 까지 가지 않고 클라이언트 단에서 file에 이미지를 업로드를 하면

이미지를 바로 보여주는 방법입니다.

단 이방법은 FileReader 를 사용하기 때문에 익스플로러 11 이상에서만 작동을 합니다..

HTML 부분

    
    
    찾아보기

CSS 부분

    .input-file {display:none;}
    .img-photo {width:150px; height:250px;}
    .btn {display:block; width:200px; padding:10px 0; text-align:center;}

JS부분

        function fnUpload(){
		$('.bind-input-id').click();
	}

	function LoadImg(value){
		if (value.files && value.files[0]){
			var reader = new FileReader();
			reader.onload = function(e){
				$('.bind-img-photo').attr("src",e.target.result);
				$('.bind-img-photo').css({display:"block"});
			}
			reader.readAsDataURL(value.files[0]);
		}
	}

서버단으로 가지 않고 클라이언트 단에서만 작동이 이뤄지기때문에 상당히 좋습니다.