[jquery] input file 태그에 이미지 첨부시 이미지 미리보기 스크립트

<input type="file" /> 태그에 이미지를 첨부할 때 첨부한 이미지를 미리보고 싶을경우에는 서버에서 작업할 필요없이 클라이언트측에 바로 이미지를 표시하는 스크립트를 알아보자. (크롬기준)

1. 코드

<input type="file" id="writeForm_pcImgFile" name="writeForm_pcImgFile" accept=".jpg,.jpeg,.png,.gif" onchange="common.inputFileReturnImg(this, 180, 120,&nbsp;'writeForm_pcImg');"> 
<script>
inputFileReturnImg: function (input, width, height, inputId) { 
    if (input.files && input.files[0]) { 
        var reader = new FileReader(); 


        reader.onload = function(e) { 
            $('#' + inputId).attr('src', e.target.result) 
            .width(width) 
            .height(height); 
        }; 


        reader.readAsDataURL(input.files[0]);
    } 
} 
</script>

2. 확인

* 위와 같이 이미지가 미리보기료 표시된다.

* 위의 내용은 크롬기준이며 그 외 브라우저 기준중 대표적인 Microsoft 전용 스크립트는 아래와 같다.

   ( 출처 : https://stackoverflow.com/questions/1887519/how-to-preview-an-image-before-upload-in-various-browsers )

    
function preview(what) {
        if(jQuery.browser.msie) {
            document.getElementById("preview-photo").src=what.value;
            return;
        }
        else if(jQuery.browser.safari) {
            document.getElementById("preview-photo").src=what.value;
            return;
        }
        document.getElementById("preview-photo").src=what.files[0].getAsDataURL();
        //  alert(jQuery("#preview-photo").height());
        //  alert(jQuery("#preview-photo").width());
        var h = jQuery("#preview-photo").height();
        var w = jQuery("#preview-photo").width();//assuming width is 68, and height is floating
        if ((h > 68) || (w > 68)){
            if (h > w){
                jQuery("#preview-photo").css("height", "68px");
                jQuery("#preview-photo").css("width", "auto");
            }else {
                jQuery("#preview-photo").css("width", "68px");
                jQuery("#preview-photo").css("height", "auto");
            }
        }
    }