업로드 선택 이미지 미리 보기

<script type="text/javascript" language="javascript">
    // 화면에 보여지게 할 이미지의 크기를 정해준다.
    var globalPic;
    var maxWidth= 100;   // 이미지의 폭
    var maxHeight= 100;  // 이미지의 높이
    var fileTypes= ["bmp","gif","png","jpg","jpeg"]; // 유효한 파일 타입
    var outImage= "previewField";    // 미리보기 필드 id
    var defaultPic= "noImage.gif";   // 유효한 파일이 아닐 경우 보여주는 이미지

    /*아래의 코드는 수정하지 마십시오.*/
    function fnPreview(what,num) {
        if ( num == 1 ) outImage = "previewField1";
        if ( num == 2 ) outImage = "previewField2";
 
        var msg;
        var source= what.value;
        var ext= source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();

        for ( var i=0; i<fileTypes.length; i++ )
            if (fileTypes[i]==ext) break;

        globalPic= new Image();
        if ( i<fileTypes.length ) globalPic.src = source;
        else {
            msg = "유효한 이미지 파일이 아닙니다.\n";
            msg+= "아래타입의 이미지 파일을 선택하여 주십시오.\n";
            msg+= fileTypes.join(", ");
            globalPic.src = defaultPic;
            alert(msg);
        }

        setTimeout("fnApplyChange()",200);
    }

    function fnApplyChange() {
        var field= document.getElementById(outImage);
        var x = parseInt(globalPic.width);
        var y = parseInt(globalPic.height);

        if ( x>maxWidth ) {
            y *= maxWidth / x;
            x = maxWidth;
        }

        if ( y>maxHeight ) {
            x *= maxHeight / y;
            y = maxHeight;
        }

        field.style.display = ( x<1 || y<1 )? "none":"";
        field.src   = globalPic.src;
        field.width = x;
        field.height= y;
    }
</script>

 

<br />
<img id="previewField1" border="0" width="300" height="100" /><br />
<br />
<input type="file" name="upFile" onChange="fnPreview(this,1);" size="70" /><br />

 

[출처] 다중 파일 업로드 3가지 방법|작성자 항해자