본문 바로가기

개발/Web

이미지 파일 업로드 확장자, 사이즈 체크

<script>

document.getElementById('cover_file').onchange = function(evt) {
        var file  = this.files[0];
        var _URL = window.URL || window.webkitURL;
        var img = new Image();
        var imglimitwidth = 3000;
        var imglimitheight = 3000;
        
        // 확장자 체크
        if ($("#cover_file").val() != "") {
            var ext = $('#cover_file').val().split('.').pop().toLowerCase();
            if ($.inArray(ext, ['jpg', 'jpeg']) == -1) {
                alert('JPG 파일만 업로드할 수 있습니다.');
                return;
            }
        }
        
        img.src = _URL.createObjectURL(file);
        
        // 이미지 사이즈 체크 및 썸네일 생성
        img.onload = function() {
            if(img.width < imglimitwidth || img.height < imglimitheight) {
                alert("이미지 사이즈가 " + imglimitwidth + "px x " + imglimitheight + "px 이하입니다. \n사이즈를 조정하여 다시 업로드 해주세요.");
                document.getElementById('cover_file').val('');
                return;
            } else {
                var tgt = evt.target || window.event.srcElement,
                    files = tgt.files;

                if (FileReader && files && files.length) {
                    var fr = new FileReader();
                    fr.onload = function() {
                        document.getElementById("cover_img_file").src = fr.result;
                    }
                    fr.readAsDataURL(files[0]);
                } else { 
                	// 파일 API 지원 불가
                }
            }
        }
    }

</script>
반응형