본문으로 바로가기

이미지 미리 보기

category JS/JavaScript 2015. 8. 25. 17:29

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<script type="text/javascript">

       function previewImage(targetObj, previewId) {


        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;

                img.style.width = '50px'; //기본설정된 div의 안에 뿌려지는 효과를 주기 위해서 div크기와 같은 크기를 지정해준다.

                img.style.height = '50px';

                

                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>


</head>

<body>

    <input type="file" onchange="previewImage(this,'previewId')">

    <div id='previewId'

        style='width: 50px; height: 50px; color: black; font-size: 9pt; border: 2px solid black; position: absolute; left: 300px; top: 200px;'>

    </div>

</body>

</html>