[jQuery] 첨부파일 확장자, 용량, 이미지 가로 세로 값 체크하기 > 웹개발팁


웹개발팁

모아보자 [SCRIPT] [jQuery] 첨부파일 확장자, 용량, 이미지 가로 세로 값 체크하기 웹개발팁

[SCRIPT] [jQuery] 첨부파일 확장자, 용량, 이미지 가로 세로 값 체크하기

본문

그누보드 write.skin.php에 활용하기 예

 
<?php for ($i=0; $is_file && $i<$file_count; $i++) { ?> 
...... 
<!--여기서부터--> 
<script> 
$("input[id=bf_file_<?php echo $i+1 ?>").change(function(){ 
    // 필드 채워지면 
    if($(this).val() != ""){ 
 
        // 확장자 체크 
        var ext = $(this).val().split(".").pop().toLowerCase(); 
        if($.inArray(ext, ["gif","jpg","jpeg",,"png"]) == -1){ 
            alert("gif, jpg, jpeg, png 파일만 업로드 해주세요."); 
            $(this).val(""); 
            return; 
            } 
             
        // 용량 체크 
        var fileSize = this.files[0].size; 
        var maxSize = 1024 * 1024; 
            if(fileSize > maxSize){ 
            alert("파일용량 1MB을 초과했습니다."); 
            $(this).val(""); 
            } 
 
 
        // 가로,세로 길이 
        var file = this.files[0]; 
        var _URL = window.URL || window.webkitURL; 
        var img = new Image(); 
        var $target = $(this); 
              
        img.src = _URL.createObjectURL(file); 
        img.onload = function() { 
            var maxSize = 1200; 
            if(img.width > maxSize){ 
            alert("업로드한 이미지 가로사이즈가 1200px 보다 크므로 업로드 불가입니다.\n현재 가로 사이즈:" + img.width + "\n\n가로사이즈가 1200px 보다 작은 파일을 다시 선택해주세요."); 
            $target.val(''); 
	      //alert(img.width + " " + img.height); 
            //$("#img_width").val(img.width); 
            //$("#img_height").val(img.height); 
            } 
        } 
    } 
}); 
</script> 
<!--여기까지추가--> 
<?php } ?> 

테스트 크롬만 해봤어요~


모바일버전 RSS SITEMAP