728x90
반응형

자바스크립트로 구현한 실시간 타임아웃 기능

이번에 고객사에서 커스터마이징 요청한것중에 한개인 실시간 타임아웃 기능이다. 

타임아웃 시간이 지나면 자동으로 로그아웃되고 사용자가 시간연장 버튼을 클릭하였을시에  

값이 초기화 되어 다시 처음부터 카운트를 세는 로직이다. 

1. setTimeout() 을 이용하여 실시간 으로 재귀호출하여 타이머를 구현

2. 시간연장 버튼 클릭시 Ajax 로 특정 dummy page 에 비동기 호출을 하여 세션을 유지시킨뒤 시간값 초기화

3. 로그아웃시 Ajax 로 서버측 로그아웃 컨트롤러로 요청후 페이지 새로고침 

아래는 timeoutchk.js  의 소스이다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var iSecond; //초단위로 환산
var timerchecker = null;
window.onload = function() {
    fncClearTime();
    initTimer();
}
 
function fncClearTime() {
    iSecond = 7200;
}
 
Lpad = function(str, len) {
    str = str + "";
    while (str.length < len) {
        str = "0" + str;
    }
    return str;
}
 
initTimer = function() {
    var timer = document.getElementById("timer");
    rHour = parseInt(iSecond / 3600);
    rHour = rHour % 60;
 
    rMinute = parseInt(iSecond / 60);
    rMinute = rMinute % 60;
 
    rSecond = iSecond % 60;
 
    if (iSecond > 0) {
        timer.innerHTML = "&nbsp;" + Lpad(rHour, 2) + "시간 " + Lpad(rMinute, 2)
                + "분 " + Lpad(rSecond, 2) + "초 ";
        iSecond--;
        timerchecker = setTimeout("initTimer()", 1000); // 1초 간격으로 체크
    } else {
        logoutUser();
    }
}
 
function refreshTimer() {
    var xhr = initAjax();
    xhr.open("POST", "/jsp_std/kor/util/window_reload2.jsp", false);
    xhr.send();
    fncClearTime();
}
 
function logoutUser() {
    clearTimeout(timerchecker);
    var xhr = initAjax();
    xhr.open("POST", "/mail/user.public.do?method=logout", false);
    xhr.send();
    location.reload();
}
 
function initAjax() { // 브라우저에 따른 AjaxObject 인스턴스 분기 처리
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
 


아래는 timeoutchk.js 를 사용하여 시간을 보여주는 HTML 폼이다.

1
2
3
4
5
6
7
          <td class="btn_bgtd_timeout" align="right">
              <script type="text/javascript" charset="utf-8" src="/js_std/kor/util/timeoutchk.js"></script>
             <span id="timer"></span>
             &nbsp;
             <a href="javascript:refreshTimer();"><img src="/images_std/kor/btn/btn_time_extension.gif" align="top"></a>
             &nbsp;&nbsp;&nbsp;
          </td>


아래이미지와 같이 기능이 구현된다. 


728x90
반응형
728x90
반응형

Locale 클래스를 이용한 표준 국가 명 한글로 얻어오기

java.util 패키지에 있는 Locale 클래스를 이용하게 되면 국가 정보를 얻을 수 가 있는데

그중 getISOCountries() 메소드를 이용하면 국제 표준 국가명 리스트를 배열로 가져올 수 있다. 

가져온 국가명 리스트를 한글로 변환 하기위해 Locale 클래스의 생성자인 Locale(String language, String country)

로 초기화후 getDisplayCountry() 메소드를 출력하면 결과가 출력된다.

1
2
3
4
5
6
7
8
9
10
11
 
public class LocaleTest {         
    public static void main(String[] args) {                
        java.util.Locale locale = null;                
        String[] countries = java.util.Locale.getISOCountries();                
        for(String country : countries) {            
            locale = new java.util.Locale("ko", country);            
            System.out.println(locale.getDisplayCountry());        
        }    
    }
} 
cs



728x90
반응형

'JAVA' 카테고리의 다른 글

Lombok 을 이용한 getter,setter 자동생성  (0) 2014.08.28
MAXMIND GeoIP를 이용한 클라이언트 접속 국가 정보 확인  (1) 2014.07.22
Quartz 라이브러리 연동을 통한 스케쥴러 구현  (0) 2014.06.06
외부 설정파일을 읽어들여 값을 반환하는 ConfigInjector 클래스  (0) 2014.05.06
Filter 클래스를 이용한 호환성보기 헤더 변조  (0) 2014.03.17
728x90
반응형

Ajax 로 구현한 비동기 멀티 파일 업로드 


회사 솔루션에서 .eml파일과 .zip 파일을 ActiveX를 이용하여 서버에 업로드하는 기능이 있었는데 

알다시피 크로스브라우징 문제때문에 Ajax 를 이용하여 비동기 멀티 파일 업로드를 구현했다. 훗....

구현시 몇가지 문제가 있었는데 첫번째 브라우저나 pc사양에 따라 다르겠지만 내 작업 노트북 기준( CPU : i7-4720 RAM : 8GB ) 인데

4메가 파일 100개 가량을 업로드 하니 브라우저가 그대로 프리징-_-;;; 이 발생해서 ( 뭐 당연한 얘기겠지만.... )  

50개 정도의 제한을 둘까 하다가 10개로 일단 제한을 걸어두었다. 

두번째는 Ajax 로 서버에 비동기 요청시 응답을 다 받기도 전에 다음 소스 코드가 수행이 되버려서 찾아보니 XmlHttpRequest 객체 

open(); 메서드의 세번째 파라미터 예 ) xhr.open("POST",URL,true); 를 xhr.open("POST",URL,false); 로 즉 false 로 변경하여 이를 해결하였다. 

추가로 ie-8 이하에서는 file폼에서 multiple 이 지원되지 않으므로 어쩔 수 없이 ie-8 일경우엔 activeX 다운로드 버튼이 보이도록 하였다.

아래는 소스 전문이다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    function ajaxUpload() {
        var objForm = document.f;
        var sf = objForm.file.files;
        if (objForm.file.value == "") {
            alert("파일을 선택해 주십시오.");
            return;
        } else {
            try {
                for (var i = 0; i < sf.length; i++) {
                    objForm.strFileName.value = sf[i].name.substr(sf[i].name.lastIndexOf("\\") + 1);
                    var formData = new FormData(objForm);
                    var xhr = initAjax();
                    xhr.open("POST", "mbox.auth.do?method=UploadMailProcess", false);
                    xhr.send(formData);
                }
            } catch (e) {
                console.log("Upload Error : "+e);
                alert("업로드 중 오류가 발생하였습니다.");
                return;
            } finally {
                alert("업로드가 완료되었습니다.");
                opener.location.reload();
                self.close();
            }
        }
    }
 
    function initAjax() { // 브라우저에 따른 AjaxObject 인스턴스 분기 처리
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
 
    function limitFileChk() { //    파일 업로드 제한 
        var objForm = document.f;
        var sf = objForm.file.files;
        var fileLimit = sf.length;
        
        if (fileLimit > 10) {
            reloadDialog("eml 파일 업로드는 10개를 넘길 수 없습니다. zip 으로 업로드 
                               해주시기 바랍니다.", objForm);
            return;
        }
        if (!multiFileChk(objForm)) { // 다중 업로드시 확장자 체크
            return;
        }
    }
 
    function reloadDialog(msg, objForm) { // 팝업창 갱신
        alert(msg);
        objForm.file.value = null; //    firefox multi-file Form flush code
        location.reload();
    }
 
    function multiFileChk(objForm) {// 다중 업로드시 eml 외에 다른 확장자 올라가는것을 방지
        var sf = objForm.file.files;
        if (sf.length == 1 && sf[0].name.lastIndexOf(".zip") != -1) // .zip 은 한개만 업로드가능
            return true;
        for (var i = 0; i < sf.length; i++) {
            if (sf[i].name.lastIndexOf(".eml") < 0) {
                reloadDialog("다중 업로드는 .eml 파일만 지원합니다.", objForm);
                return false;
            }
        }
        return true;
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <form name="f" method="post" enctype="multipart/form-data">
        <input type="hidden" name="strFileName" value="">
        <table class="h2">
            <tr>
                <td><img src="/images_std/kor/bullet/arrow_pop.gif" align="top" />파일 업로드</td>
            </tr>
        </table>
        <div class="k_puAdmin_box">
            <table>
                <tr>
                    <td width="80" align="right"><strong>파일 선택</strong></td>
                    <td><input name="file" type="file" style="width: 350px;"
                             onchange="limitFileChk();" multiple/></td>
                </tr>
            </table>
        </div>
        <div style="text-align: center">
            <a href="javascript:ajaxUpload()"><img src="/images/kor/btn/popup_confirm.gif" /></a>
             &nbsp;
            <a href="javascript:window.close()"><img src="/images/kor/btn/popup_close.gif" /></a>
        </div>
    </form>


728x90
반응형
728x90
반응형

JavaScript Array Object 의 메서드 사용방법 예

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
// 배열 엘리먼트 추가
console.log('[1,2] =======================');
var data = [1, 2];
data[2] = 3;
console.log(data);
 
var value = data[2];
console.log(value);
 
// 값이 없는 배열 엘리먼트에는 undefined가 할당됨
data[5] = 6;
console.log(data);
console.log(typeof data[4]); // undefined 가 나옴
 
var five = 5;
data[five + 1] = 7;
console.log(data);
 
// new Array() : Array Object 의 인스턴스를 반환
console.log('new Array() =======================');
var obj = new Array();
console.log(obj.length);
 
obj = new Array(3);
console.log(obj.length);
 
// 아래의 3가지는 모두 동일하다
console.log(new Array(11, 34, 56));
console.log(new Array([11, 34, 56]));
console.log([11, 34, 56]);
 
// concat() : 값을 결합 하여 배열로 반환
console.log('concat() =======================');
var value = [1, 2];
// [1, 2, 3, 4]
result = value.concat(3, 4);
console.log(result);
console.log(value.concat([3],[4]));
// [1, 2, 3. [4. [5. 6]]]
console.log(value.concat([3, [4, [5,6]]]));
 
// push() : 배열의 끝에 값을 추가한다.
console.log('push() =======================');
var len,
    value = [1,2,3];
 
len = value.push(456); // length를 반환
console.log(value);
console.log(len);
value.push(12, [34]);
console.log(value);
console.log(len);
 
// join() : 배열과 분리자를 결합해서 문자열로 변환 및 반환
console.log('join() =======================');
var value = [1, 2, 3];
console.log(value.join());
console.log(value.join('')); // ,(콤마) 가 사라지고 일반 문자열 인것처럼 변환한다.
console.log(value.join('##'));
 
// pop() : 배열의 마지막 엘리먼트 삭제
console.log('pop() =======================');
var value = [1, 2, 3];
value.pop();
console.log(value);
 
// unshift() : 배열의 첫 번째 엘리먼트에 추가
console.log('unshift() =======================');
 
// shift() : 배열의 첫 번째 엘리먼트 삭제
console.log('shift() =======================');
 
// sort() : 엘리먼트 값이 적은 순서대로 sort 된다. ascending
console.log('sort() =======================');
var result,
    value = [4, 2, 3, 1];
 
result = value.sort();
console.log(result);
console.log(value);
 
value = ['A1', 'A01', 'B2', 'B02'];
value.sort();
console.log(value);
 
value = ['Z', 'AB', 'JKL', 'JQRT'];
value.sort();
console.log(value);
 
value = ['Z','z', 'AB', 'JKL', 'JQRT'];
value.sort();
console.log(value);
 
value = [, 78, 12]; // 0번째는 undefined
value.sort();
console.log(value[2]);
 
// sort() 를 desc(내림차순) 으로 sort가 불가하다 직접 함수를 작성해야함
var value = [101, 26, 7, 1234];
value.sort();
console.log(value);
 
// 기본적으로 sort 는 문자열 sort이다.
// unicode이기 때문에 한지리씩 비교한다.
value = [101, 26, 7, 1234];
value.sort(function(one, two){
    return one - two;
}); // 굉장히 불필요한 작업이지만 어쩔수없다. 클라이언트 언어이기때문에
    // 제공을 해주지 않은것으로 보인다. factorial 개념
console.log(value);
 
// 역순으로 sort 를 한다.
value = [101, 26, 7, 1234];
value.sort(function(one, two){
    return -(one - two);
});
console.log(value);
 
// reverse() : 배열 엘리먼트 위치를 역순으로 바꿈
console.log('reverse() =======================');
var result;
    value = [1,7,3];
 
result = value.reverse();
console.log(result);



728x90
반응형

+ Recent posts

티스토리툴바