이미지 미리보기 > JavaScript

• 목록

게시판과 같은 곳에서 이미지를 올릴때
 미리보기 기능이 있으면 참 좋겠죠

<script>
 function into(path) {
 document.images["img_path"].src=path;
 if (!document.images["img_path"].complete) {
            into(path);
 }
 document.images["img_path"].onload = document.images"img_path"].style.display='block';
 }
 </script>

 ===================
이와같은 자바스크립트와 함께
===================
이미지를 보여줄 부분
<img name="img_path" src="../image/<?=$res[img_src]?>" width="500" height="375" style="display:'<?=$display?>'">                                                                       

이미지를 선택하는 부분
===================
이미지 : <input type=file name=img_src onchange="into(this.value)" size=45>

 ::여기서 onchange로 폼의 값을 자바스크립트로 넘기고
 자바스크립트는 그 정보를 읽어서 자신의 컴에 있는 이미지를 불러가
 위의 부분에다 이미지를 출력해 주는 것닙니다.
이미지의 style에서 display는 프로그램으로 적절하게 출력되게 하믄 됩니다.
none 혹은 block으로

###############################################
        function showPimg(imgNum) // 이미지 미리보기........
        {
                var imgArr = new Array();
                var ckNo;
                var imgName = eval("cfrm.imgUp" + imgNum + ".value;");
                imgArr = imgName.split(".");
                ckNo = imgArr.length - 1;
                if ( !(imgArr[ckNo] == "gif" || imgArr[ckNo] == "GIF" || imgArr[ckNo] == "jpg" || imgArr[ckNo] == "JPG" || imgArr[ckNo] == "jpeg" || imgArr[ckNo] == "JPEG") )
                {
                        alert("GIF 또는 JPG 형식만 등록 가능합니다.");
                        eval("document.img" + imgNum + ".src = 'img/noimg_1.gif';");
                        eval("cfrm.imgUp" + imgNum + ".style.color = '#FFFFFF';");
                }
                else
                {
                        eval("document.img" + imgNum + ".src = cfrm.imgUp" + imgNum + ".value;");
                        eval("cfrm.imgUp" + imgNum + ".style.color = '#000000';");
                }
        }


 <input type="file" name="imgUp6" size="14" onchange="showPimg('6');" style="color:#000000;">
 <img name="img1" src="img/noimg_1.gif" width="102" height="77" border="1" style="border-color:#D3D3D3">