jQuery img Upload preview

간단하게 img를 preview하는 코드이다.

어떤 블로그를 참조해서 내가 직접 돌려보고 잊어버릴까봐(fiddle은 저장하는 기능이 있을텐데 난 잘 모르겠다 어휴 ㅠ ㅠ) 올리기 위함이다.(이 코드를 작성하신 분께서는 댓글 남겨주세요. 출처 남길게요)

<form>

    <input type="file" name="image" id="image" />

    <div id="image"></div>

 

</form>

<div id="image_preview">

  <img src="#" />

  <br />

  <a href="#">Remove</a>

</div>

$('#image').on('change', function() {

        

        ext = $(this).val().split('.').pop().toLowerCase(); //확장자

        

        //배열에 추출한 확장자가 존재하는지 체크

        if($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {

            resetFormElement($(this)); //폼 초기화

            window.alert('이미지 파일이 아닙니다! (gif, png, jpg, jpeg 만 업로드 가능)');

        } else {

            file = $('#image').prop("files")[0];

            blobURL = window.URL.createObjectURL(file);

            $('#image_preview img').attr('src', blobURL);

            $('#image_preview').slideDown(); //업로드한 이미지 미리보기 

            //$(this).slideUp(); //파일 양식 감춤

        }

    });

  

    $('#image_preview a').bind('click', function() {

        resetFormElement($('#image')); //전달한 양식 초기화

       // $('#image').slideDown(); //파일 양식 보여줌

        $(this).parent().slideUp(); //미리 보기 영역 감춤

        return false; //기본 이벤트 막음

    });

        

  

    function resetFormElement(e) {

        e.wrap('<form>').closest('form').get(0).reset(); 

      

        e.unwrap(); //감싼 <form> 태그를 제거

    }