저작권 안내: 저작권자표시 Yes 상업적이용 No 컨텐츠변경 No

스프링5 입문

JSP 2.3

JPA 입문

DDD Start

인프런 객체 지향 입문 강의

'파일 크기'에 해당되는 글 1건

  1. 2006.05.08 자바스크립트에서 로컬 파일 크기 알아내기
IE와 모질라 계열 브라우저에서 로컬 파일의 크기를 알아내는 방법을 살펴본다.

모질라 계열 브라우저에서 로컬 파일 크기 알아내기

파이어폭스와 같은 모질라 계열 브라우저에서는 XUL(XML User Interface Language)이 제공하는 로컬 파일 인터페이스를 사용해서 파일의 크기를 알아낼 수가 있다. 하지만, 파이어폭스가 보안상의 이유로 로컬 파일에 접근할 수 없도록 막아놓고 있기 때문에, 이 부분의 보안을 허용해주어야만 로컬 파일에 접근할 수 있게 된다.

먼저 로컬 파일에 접근할 수 있도록 하기 위해 "signed.applets.codebase_principal_support" 설정값을 true로 지정해주어야 한다. "signed.applets.codebase_principal_support"의 설정은 다음과 같은 방법으로 변경할 수 있다.

  1. 주소창에 about:config 를 입력하면, 설정 목록이 출력된다.
  2. 필터 입력란에 signed 를 입력하면 "signed.applets.codebase_principal_support" 설정명만 목록에 출력된다.
  3. 설정명에서 더블클릭하면 값이 true로 바뀐다.
signed.applets.codebase_principal_support 설정을 true로 변경해주면, 자바스크립트에서 로컬 파일에 접근하고자 할때, 사용자가 접근 권한 여부를 지정해줄 수 있게 된다. signed.applets.codebase_principal_support 설정을 true로 지정한 상태에서 다음과 같은 자바스크립트 코드를 실행하면,

    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

다음과 같이 'UniversalXPConnect' 권한을 현재 페이지에 부여할지의 여부를 확인하는 경고창이 뜬다.


위 화면에서 [허가] 버튼을 클릭하면 'UniversalXPConnect' 권한이 현재 페이지에 부여되어, 자바스크립트에서 로컬 파일에 접근할 수 있게 된다.

'UniversalXPConnect' 권한을 얻은 후에는 다음의 코드를 통해서 로컬 파일의 크기를 알아낼 수 있다.

    try {
        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
        var file = Components.classes["@mozilla.org/file/local;1"]
                             .createInstance(Components.interfaces.nsILocalFile);
        file.initWithPath(filePath);
        
        len = file.fileSize;
    } catch(e) {
        alert("signed.applets.codebase_principal_support를 설정해주세요!\n"+e);
    }

XUL에서 제공하는 nslLocalFile 인터페이스를 사용하면 로컬 파일에 접근할 수 있는데, nslLocalFile 인터페이스의 fileSize 프로퍼티값을 통해서 파일의 크기를 알아낼 수가 있다. 접근하고자 하는 파일은 initWithPath() 함수를 통해서 지정하게 된다.

IE에서 업로드한 파일 크기 알아내기

IE는 Scripting.FileSystemObject ActiveX 객체를 사용해서 로컬 파일에 접근할 수 있지만, 보안상의 문제 때문에 원격에서 로딩한 페이지에서는 로컬 파일에 접근할 수가 없다. IE에서는 인증된 애플릿이나 ActiveX 객체를 사용하지 않고 로컬 파일의 크기를 알아낼 수 있는 편법이 있는데, 간단하게 Image 객체를 사용하면 된다.

IE에서 Image 객체는 dynSrc 프로퍼티를 사용해서 로컬 파일을 명시하더라도 에러가 발생하지 않는다. 또한, IE의 Image 객체는 fileSize 프로퍼티를 제공한다. 따라서, Image 객체의 dynSrc 프로퍼티와 fileSize 프로퍼티를 사용하면, 다음과 같이 매우 간단하게 로컬 파일의 크기를 알아낼 수가 있다.

    var img = new Image();
    img.dynsrc = filePath;
    len = img.fileSize;

완전한 코드

IE와 모질라 계열의 브라우저에 따라 알맞게 자바 스크립트 코드를 사용하면 브라우저에 상관없이 로컬 파일의 크기를 알아낼 수가 있을 것이다. 아래 코드는 브라우저에 상관없이 동작하도록 만들어본 getFileSize() 자바스크립트 함수이다.

    function getFileSize(filePath)
    {
        var len = 0;
        
        if ( navigator.appName.indexOf("Netscape") != -1) {
            try {
                netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
            } catch(e) {
                alert("signed.applets.codebase_principal_support를 설정해주세요!\n"+e);
                return -1;
            }
            try {
                var file = Components.classes["@mozilla.org/file/local;1"]
                                     .createInstance(Components.interfaces.nsILocalFile);
                file.initWithPath ( filePath );
                
                len = file.fileSize;
            } catch(e) {
                alert("에러 발생:"+e);
            }
        } else if (navigator.appName.indexOf('Microsoft') != -1) {
            var img = new Image();
            img.dynsrc = filePath;
            len = img.fileSize;
        }
        return len;
    }

이제 다음과 같이 getFileSize() 함수만 사용하면 로컬 파일의 크기를 구할 수 있게 된다.

    <script ..>
    ...
    var len = getFileSize(document.test.file.value);
    if (len > 1024 * 1024) {
        alert("파일 크기는 1메가보다 작아야 합니다.");
    }
    ...
    </script>
    
    <form name="test">
    <input type="file" name="file">
    </form>

Posted by 최범균 madvirus

댓글을 달아 주세요