html 상의 input:file에서 선택한 이미지 파일을 서버에 업로드하지 않고 미리보기하는 방법은 크게 2가지임.

하나는 FileReader를 이용하는 방법이고, 하나는 IE 전용 filter를 이용하는 방법.


FileReader의 경우 왠만한 최신 브라우저는 다 지원함.

http://caniuse.com/#feat=filereader <- 지원하는 브라우저는 여기서 확인가능.


IE의 경우 IE10부터 FileReader가 있고 그 하위버전은 filter를 이용해야 함.


개인적으로 로컬 이미지 파일 미리보기를 테스트해서 성공한 브라우저는 다음과 같음.

Chrome 37.0.2062.124 

FireFox 32.0.3

Opera 24.0.1558.64

IE11 (10,9,8,7은 에뮬레이션 모드로 테스트)

아이폰 Safari 


Safari5 의 경우 FileReader도 없고 filter도 없어서 미리보기가 불가능했음. (Safari6 부터는 FileReader 있음)


아래는 jQuery용으로 만든 로컬 이미지 미리보기.

소스만 긁어서 바로 테스트할 수 있도록 html 파일 전체 소스를 올림.


<!doctype html>


<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>
$.fn.setPreview = function(opt){
    "use strict"
    var defaultOpt = {
        inputFile: $(this),
        img: null,
        w: 200,
        h: 200
    };
    $.extend(defaultOpt, opt);

    var previewImage = function(){
        if (!defaultOpt.inputFile || !defaultOpt.img) return;

        var inputFile = defaultOpt.inputFile.get(0);
        var img       = defaultOpt.img.get(0);

        // FileReader
        if (window.FileReader) {
            // image 파일만
            if (!inputFile.files[0].type.match(/image\//)) return;

            // preview
            try {
                var reader = new FileReader();
                reader.onload = function(e){
                    img.src = e.target.result;
                    img.style.width  = defaultOpt.w+'px';
                    img.style.height = defaultOpt.h+'px';
                    img.style.display = '';
                }
                reader.readAsDataURL(inputFile.files[0]);
            } catch (e) {
                // exception...
            }
        // img.filters (MSIE)
        } else if (img.filters) {
            inputFile.select();
            inputFile.blur();
            var imgSrc = document.selection.createRange().text;

            img.style.width  = defaultOpt.w+'px';
            img.style.height = defaultOpt.h+'px';
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enable='true',sizingMethod='scale',src=\""+imgSrc+"\")";            
            img.style.display = '';
        // no support
        } else {
            // Safari5, ...
        }
    };

    // onchange
    $(this).change(function(){
        previewImage();
    });
};


$(document).ready(function(){
    var opt = {
        img: $('#img_preview'),
        w: 200,
        h: 200
    };

    $('#input_file').setPreview(opt);
});
</script>
</head>


<body>
<input type="file" id="input_file" />
<br />
<img id="img_preview" style="display:none;"/>

</body>
</html>










Posted by bloodguy

댓글을 달아 주세요