[JavaScript/jQuery] input file 이미지 선택시, 미리보기 구현 (ie11+)

 

input 태그를 이용하여 이미지 파일을 업로드 할 때, 선택한 이미지의 미리보기 기능이 필요한 경우가 있습니다.

 

(서버에 파일을 업로드하지 않고, 미리보기 기능을 구현하는 것)

 

해당 소스는 크롬, 파폭, 엣지 등 현재 많이 사용되는 최신 브라우저와 익스플로러 11버전 이상만 지원합니다.

 

 

input file 이미지 선택시, 미리보기 구현 소스 (ie11+)

 

※ 해당 소스는 제이쿼리와 함께 사용해야합니다.

 

스크립트 부분

<script src="//code.jquery.com/jquery.min.js"></script> <!-- 제이쿼리 1.x 최신 버전 로드 -->
<script>
// input file 이미지 미리보기 함수
function previewImage(targetObj, previewId) {
 
    var ext = $(targetObj).val().split('.').pop().toLowerCase();
 
    if ($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
        alert('gif, png, jpg, jpeg 파일만 업로드 할수 있습니다.');
        return;
    }
 
    var preview = document.getElementById(previewId); // 미리보기 div id   
    var ua = window.navigator.userAgent;
 
    if (ua.indexOf("MSIE") > -1) { //ie일때
 
        targetObj.select();
 
        try {
            var src = document.selection.createRange().text; // get file full path 
            var ie_preview_error = document
                    .getElementById("ie_preview_error_" + previewId);
 
            if (ie_preview_error) {
                preview.removeChild(ie_preview_error); //error가 있으면 delete
            }
 
            var img = document.getElementById(previewId); //이미지가 뿌려질 곳 
 
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
                    + src + "', sizingMethod='scale')"; //이미지 로딩, sizingMethod는 div에 맞춰서 사이즈를 자동조절 하는 역할
        } catch (e) {
            if (!document.getElementById("ie_preview_error_" + previewId)) {
                var info = document.createElement("<p>");
                info.id = "ie_preview_error_" + previewId;
                info.innerHTML = "a";
                preview.insertBefore(info, null);
            }
        }
    } else { //ie가 아닐때
        var files = targetObj.files;
        for ( var i = 0; i < files.length; i++) {
 
            var file = files[i];
 
            var imageType = /image.*/; //이미지 파일일 경우만 뿌려줌.
            if (!file.type.match(imageType))
                continue;
 
            var prevImg = document.getElementById("prev_" + previewId); // 이전에 미리보기가 있다면 삭제
            if (prevImg) {
                preview.removeChild(prevImg);
            }
 
            var img = document.createElement("img"); // 크롬은 div에 이미지가 뿌려지지 않기때문에 자식 Element를 만듬.
            img.id = "prev_" + previewId;
            img.classList.add("obj");
            img.file = file;
            
            preview.appendChild(img);
 
            if (window.FileReader) { // FireFox, Chrome, Opera 확인.
                var reader = new FileReader();
                reader.onloadend = (function(aImg) {
                    return function(e) {
                        aImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            } else { // safari is not supported FileReader
                //alert('not supported FileReader');
                if (!document.getElementById("sfr_preview_error_"+ previewId)) {
                    var info = document.createElement("p");
                    info.id = "sfr_preview_error_" + previewId;
                    info.innerHTML = "not supported FileReader";
                    preview.insertBefore(info, null);
                }
            }
        }
    }
}
</script>

 

 

HTML 부분

<div id="user_upload_img"></div>
<input id="ex_file" type="file" onchange="previewImage(this, 'user_upload_img');">

 

 

위 소스 복사 붙여넣기에 문제가 생긴다면 아래 첨부 파일을 다운 받으세요.

preview_Image.html

0.00MB

 

테스트 결과

 

 

 

하위 익스플로러버전 까지 지원하는 소스를 찾긴했지만, 익스플로러가 여간 까다로운 것이 아니라서...

 

익스플로러는 차라리 미리보기 기능을 사용하지 않거나

 

서버에 실제 파일 업로드 후 미리보기 기능을 구현하는게 훨씬 낫다는 개인적인 생각입니다.