[javascript] 이미지 파일 업로드 시 이미지의 사이즈 알아내기2

프로그래밍/Web 2009. 7. 30. 13:45 Posted by galad
!!! IE 6.0밖에 안되는 듯?!!!!
아마도 FF문제와 같이 locally loaded image에 대해서는 IE6.0밖에 안되는 듯

내가 사용하는 버젼

문제: callback 함수에는 인자 넘기기가 불가능한가?
전역변수로 해결하였으나 다른 방법은 없는가??

참고: http://www.coderanch.com/t/121417/HTML-JavaScript/Passing-Parameter-Into-Callback-Function

jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="image_util.js"></script>

<script type="text/javascript">
function fileCheck(formObj) {
    if(formObj.fileName.value == "") {
        alert("이미지를 선택해주세요.");
        return false;
    }
    if(formObj.checkUploadImgOkYn.value != "Y") {
        alert("업로드 할 수 없는 이미지 파일입니다.");
        return false;
    }

    return true;
}
</script>
</head>
<body>
<form name="F" onsubmit="return fileCheck(this);">
<input type="file" name="fileName" onChange="checkUploadImg(this.value, 'checkUploadImgOkYn', 'jpg' ,1600, 1200, 500)" >
<input type="hidden" name="checkUploadImgOkYn" id="checkUploadImgOkYn" value="N">
<br>
<input type="submit">
</form>
</body>
</html>

js
// 이미지 파일 관련 javascript

/**
 * 파일 확장자를 반환
 * @param filePath 파일 path
 * @return 확장자
 */
function getFileExtension(filePath)
{
    var lastIndex = -1;
    lastIndex = filePath.lastIndexOf('.');
    var extension = "";

    if ( lastIndex != -1 )
    {
        //extension = filePath.substring( lastIndex+1, filePath.len );
        extension = filePath.substring( lastIndex+1);
    } else {
        extension = "";
    }
   
    return extension;
}


// 이미지.onload시의 callback 함수에 파라미터를 넘기기 위한 전역변수
var g_objId = "";            // 이미지 체크 후, 그 결과를 설정할 input태그의 id. ex) <input type="hidden" name="checkUploadImgOkYn" id="checkUploadImgOkYn" value="N">
var g_widthLimit = 0;    // 이미지 최대 가로길이
var g_heightLimit = 0;    // 이미지 최대 세로길이
var g_fileSizeLimit = 0;    // 이미지 최대 파일크기

/**
 * 이미지 업로드 태그에서 부를 함수. ex) &lt;input type="file" name="fileName" onChange="checkUploadImg(this.value, 'checkUploadImgOkYn', 'jpg' ,1600, 1200, 500)" >
 * @param imgSrc 이미지 파일
 * @param objId 이미지 체크 후 결과를 설정할 input태그의 id
 * @param fileExt_limit 이미지 파일 확장자 제한
 * @param width_limit 이미지 최대 가로길이
 * @param height_limit 이미지 최대 세로길이
 * @param fileSize_limit 이미지 최대 파일크기
 * @return 없음. 체크에 성공하면 objId에 Y를 설정. 실패하면 N을 설정함.
 */
function checkUploadImg(imgSrc, objId, fileExt_limit, width_limit, height_limit, fileSize_limit)
{
    var widthLimit = 0;
    var heightLimit = 0;
    var fileSizeLimit = 0;
    var fileExtLimit = "";
   
    if(typeof width_limit != "undefined") { // 제약조건이 있으면
        widthLimit = width_limit;
    }
    if(typeof height_limit != "undefined") { // 제약조건이 있으면
        heightLimit = height_limit;
    }
    if(typeof fileSize_limit != "undefined") { // 제약조건이 있으면
        fileSizeLimit = fileSize_limit;
    }
    if(typeof fileExt_limit != "undefined") { // 제약조건이 있으면
        fileExtLimit = fileExt_limit;
    }
    else { // 이미지 파일만 업로드해야 하므로 조건이 없으면 기본설정
        fileExtLimit = "jpg,gif,png";
    }

    // global 변수에 저장. callback함수에 인자 넘기기 불가하기 때문
    g_objId = objId;
    g_widthLimit = widthLimit;
    g_heightLimit = heightLimit;
    g_fileSizeLimit = fileSizeLimit;
   
    // IE 체크
    if(navigator.userAgent.toLowerCase().indexOf("msie") == -1) { // IE가 아니면
        var msg = "파일 확장자 : " + fileExtLimit;
        msg = (widthLimit != 0) ? msg + " , 이미지 가로 길이 : " + widthLimit : msg;
        msg = (heightLimit != 0) ? msg + " , 이미지 가로 길이 : " + heightLimit : msg;
        msg = (fileSizeLimit != 0) ? msg + " , 이미지 가로 길이 : " + fileSizeLimit : msg;
       
        alert("인터넷 익스플로러가 아닌 경우에는 업로드할 그림을 확인할 수 없습니다.\n다음의 조건에 맞는 파일을 업로드해 주세요.\n" + msg);
        document.getElementById(g_objId).value = "Y";
        return;
    }
   
    if(typeof imgSrc == "undefined" || imgSrc == "") {
        alert("선택된 파일이 없습니다.");
    }

    var ext = getFileExtension(imgSrc);
    //alert(ext);

    if (ext == "") {
        alert('올바른 파일을 입력하세요');
        return;
    }
    else if(fileExtLimit != "" && ext.toLowerCase().indexOf(fileExtLimit.toLowerCase()) == -1) { // 제약조건이 없으면 체크 안 함
        alert(fileExtLimit + " 형식의 파일만 가능합니다.");
        return;
    }
   
    LoadImg(imgSrc);
}

/**
 * 이미지를 로드
 * @param imgSrc 이미지 파일 path
 * @return
 */
function LoadImg(imgSrc)
{
    var imgInfo = new Image();
    imgInfo.onload = img_Loaded;
    imgInfo.onerror = function() {
        // always called
        alert("이미지 파일의 로드에 실패했습니다.");
        document.getElementById(g_objId).value = "N";
    };
    imgInfo.src = imgSrc;
}

/**
 * image.onload의 callback 함수. image가 load 되면 불려진다.
 * @return
 */
function img_Loaded()
{
    /*var imgSrc, imgWidth, imgHeight, imgFileSize;
    imgSrc = this.src;
    imgWidth = this.width;
    imgHeight = this.height;
    imgFileSize = this.fileSize;

    alert(imgWidth);*/

    var objId = g_objId;
    var widthLimit = g_widthLimit;
    var heightLimit = g_heightLimit;
    var fileSizeLimit = g_fileSizeLimit;
    //alert(widthLimit);
    //alert(heightLimit);
   
    if (this.src == "" || this.width <= 0 || this.height <= 0)
    {
        alert("이미지 파일의 로드에 실패했습니다.");
        document.getElementById(objId).value = "N";
        return;
    }

    // 제약조건 확인
    if(widthLimit != 0 && this.width > widthLimit) {
        alert("선택한 이미지의 가로 길이가 허용치인 " + widthLimit + " 를 초과했습니다.\n선택한 이미지의 가로 길이는 " + this.width + " 입니다.");
          document.getElementById(objId).value = "N";
        return;
    }
    if(heightLimit != 0 && this.height > heightLimit) {
        alert("선택한 이미지의 세로 길이가 허용치인 " + heightLimit + " 를 초과했습니다.\n선택한 이미지의 세로 길이는 " + this.height + " 입니다.");
          document.getElementById(objId).value = "N";
        return;
    }
    if(fileSizeLimit != 0 && this.fileSize > fileSizeLimit*1024) {
        alert("선택한 이미지 크기가 허용치인 " + fileSizeLimit + "KB 를 초과했습니다.\n선택한 이미지의 크기는 약 " + Math.ceil(this.fileSize/1024) + "KB 입니다.");
          document.getElementById(objId).value = "N";
        return;
    }

    // 제약조건 이내라면
    document.getElementById(objId).value = "Y";

    //이미지 사이즈 저장
    //document.F.imgWidth.value = imgWidth;
    //document.F.imgHeight.value = imgHeight;

    //alert("this.width = " + this.width);
    //alert("this.height = " + this.height);

    //alert(document.getElementById(objId).value);
}


저작자표시 비영리 동일조건

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] IE6.0 프레임 - 가로 스크롤바 버그  (0) 2009.08.21
[ajax] 소스  (0) 2009.08.19
[javascript] 이미지 파일 업로드 시 이미지의 사이즈 알아내기  (0) 2009.07.29
[html] HtmlCleaner를 이용한 html 파싱  (1) 2009.07.27
[javascript] 스크립트로 style, class 변경  (1) 2009.07.24
 

티스토리툴바