사진 업로드 할 때 미리볼 수 있도록 화면에 표시

사진 업로드 미리보기

오늘 입사지원 페이지를 만드느라 열심히 구글링을 했었는데

이상하게 사람들이 된다고 공유해 놓은 소스들이 제대로 안되서 많이 헤맸었는데

딱 jquery로 작성 된 것을 발견!!

먼저 jquery를 사용하니까

<script type="text/javascript" src="../common/js/jquery-1.9.1.min.js" charset="euc-kr"></script>

넣어줘야 하고

그 아래에는 

<script type="text/javascript"> function readURL(input) {     if (input.files && input.files[0]) {         var reader = new FileReader();         reader.onload = function (e) {             $('#UploadedImg').attr('src', e.target.result);         }         reader.readAsDataURL(input.files[0]);     } }

요렇게 넣어주는데 여기 #UploadedImg 는 미리보기 이미지가 보여질 곳.

뭐 소스가 통째로 된 것은 구글링 해보면 다 나오니까

... 생략하고

<img id="UploadedImg" src="../images/membership/recruit_no_image.gif" width="85" height="111">

 src에는 처음에 보여질 이미지를 넣어놓았다.

<input type='file' onchange="readURL(this);" style='position：absolute; margin-left:-80px; width:62px; height:18px; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; cursor:pointer;' />

style은 무시해도 좋음. input type="file" 이고 onchange에 함수만 잘 넣어주면 됨.

대신 사진 사이즈라 던가 그런것은 함수로 넘겼을 때 따로 계산해 주면 될 것 같다.

아니면 업로드 할 경우 확인해도 되고.

이건 등록 버튼을 눌렀을 경우 체크하는 함수이긴 한데 확인은 안 해 봤지만 저기 안에 사용해도 될 것 같다.

function file_check()     {         isCheck = false;         filename    = document.regform.file1.value;         file_len    = filename.length;         file_gubun  = filename.substr(file_len - 3, file_len);         if (file_gubun.toLowerCase() == "jpg" || file_gubun.toLowerCase() == "gif")         {             isCheck = true;         }         if (isCheck == false)         {             alert("확장자가 jpg, gif 인 파일만 업로드가 가능합니다.");             document.regform.file1.select();             document.selection.clear();             return false;         }         else         {             return true;         }     }

1. 

2.

3. 

------------------------

이게 Data URI Scheme을 사용한건데

ㅠㅠ IE10 부터만 미리보기가 제대로 됨. IE10 이하에서는 미리보기가 안 되지만 업로드에는 문제 없었음. 크롬에서 잘 됨.