[JavaScript] 파일업로드시 용량 검사하기[JavaScript] 파일업로드시 용량 검사하기

Posted at 2019. 12. 26. 11:25 | Posted in JavaScript & jQuery/JavaScript
반응형



참고 : https://zzznara2.tistory.com/617




■ 파일업로드시 용량 검사하기




# 소스코드

<html>

<head>

<title>:: JAVASCRIPT 파일업로드 ::</title>

<script type="text/javascript">

    function imgFileUpload() {


        /// @brief 업로드할 이미지의 크기( Byte )를 구해온다.

        const imgSize = document.getElementById("personImg").files[0].size;


        /// @brief 업로드할 이미지 사이즈의 크기는 4MB 이하로 설정

        const maxSize = 4 * 1024 * 1024;


        /// @brief 이미지

        if(imgSize > maxSize) {


            alert("첨부할 수 있는 이미지 파일은 4MB 이하여야 합니다.");

            document.getElementById("personImg").focus();

            return false;


        } else {


            alert("업로드 가능한 이미지입니다.");


        }

    }

</script>

</head>

<body>

<form enctype="multipart/form-data" id="upFrm" method="post">

    <input type="file" id="personImg" name="personImg" value=""/>

    <input type="button" onClick="imgFileUpload();" value="업로드"/>

</form>

</body>

</html>




# 출력결과 - 수정예정






관련문서 : [JavaScript] 파일업로드시 확장자 검사하기







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] getElementByTagName( ) 메소드  (0) 2020.02.28
[JavaScript] INPUT TYPE FILE 썸네일 생성  (0) 2020.01.16
[JavaScript] 체크박스 전체 선택 - Sample  (0) 2019.12.19
[JavaScript] 실시간 타이머(시계) 만들기  (2) 2019.12.05
[JavaScript] 전광판 효과 구현하기  (0) 2019.12.05
//

[JavaScript] 체크박스 전체 선택 - Sample[JavaScript] 체크박스 전체 선택 - Sample

Posted at 2019. 12. 19. 11:34 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 전체영역을 선택하는 체크박스 샘플 코드




# 소스코드

<html>

<head>

<title>:: JavaScript 체크박스 ::</title>

<script type="text/javascript">


    // @command 전체선택

    function allCheckedBox(obj) {


        // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

        const termClass = obj.getAttribute("class");


        // @brief 선택한 클래스명과 같은 클래스의 갯수

        console.log(document.getElementsByClassName(termClass).length);


        Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) {


            // @brief 엘리먼트의 값 출력

            console.log(element.value);


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다.

                element.checked = true;

            }


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우

            else {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다.

                element.checked = false;

            }

        });

    }


    // @command 개별 선택이 이루어진 경우에 전체값 체크의 예외처리

    function eachCheckedBox(obj) {


        // @brief 선택한 체크박스의 상태가 선택해제인 경우

        if(obj.checked == false) {


            // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

            const termClass = obj.getAttribute("class");


            // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 첫번째 checkbox의 상태를 체크해제한다.

                document.getElementsByClassName(termClass)[0].checked = false;

            }

        }

    }

</script>

</head>

<body>

     <h1>■ 체크박스 전체 선택 - SAMPLE</h1>


    <!-- @brief 전체의 선택의 경우 반드시 index값이 0인 첫번째에 위치해야 한다. -->

    <label>

        <input type="checkbox" class="neHeros" value="" onChange="allCheckedBox(this);"/>&nbsp;전체

    </label>


    <!-- @brief 개별선택될 체크박스들 -->

    <label>

        <input type="checkbox" class="neHeros" value="D" onChange="eachCheckedBox(this);"/>&nbsp;데몬헌터

    </label>

    <label>

        <input type="checkbox" class="neHeros" value="W" onChange="eachCheckedBox(this);"/>&nbsp;워든

    </label>

    <label>

        <input type="checkbox" class="neHeros" value="K" onChange="eachCheckedBox(this);"/>&nbsp;키퍼 오브 더 그루브

    </label>

    <label>

        <input type="checkbox" class="neHeros" value="P" onChange="eachCheckedBox(this);"/>&nbsp;프리시스 오브 더 문

    </label>

</body>

</html>




# 출력결과







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] INPUT TYPE FILE 썸네일 생성  (0) 2020.01.16
[JavaScript] 파일업로드시 용량 검사하기  (0) 2019.12.26
[JavaScript] 실시간 타이머(시계) 만들기  (2) 2019.12.05
[JavaScript] 전광판 효과 구현하기  (0) 2019.12.05
[JavaScript] AJAX 통신 정리  (0) 2019.11.17
//

[JavaScript] 실시간 타이머(시계) 만들기[JavaScript] 실시간 타이머(시계) 만들기

Posted at 2019. 12. 5. 19:25 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 실시간 타이머(시계) 만들기




# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // 시간을 딜레이 없이 나타내기위한 선 실행

        realTimer();


        // 이후 0.5초에 한번씩 시간을 갱신한다.

        setInterval(realTimer, 500);

    });


    // 시간을 출력

    function realTimer() {

const nowDate = new Date();

const year = nowDate.getFullYear();

const month= nowDate.getMonth() + 1;

const date = nowDate.getDate();

const hour = nowDate.getHours();

const min = nowDate.getMinutes();

const sec = nowDate.getSeconds();

document.getElementById("nowTimes").innerHTML = 

                  year + "-" + addzero(month) + "-" + addzero(date) + "&nbsp;" + hour + ":" + addzero(min) + ":" + addzero(sec);

}


        // 1자리수의 숫자인 경우 앞에 0을 붙여준다.

function addzero(num) {

if(num < 10) { num = "0" + num; }

  return num;

}

</script>

</head>

<body>

    <h1>■ 현재시간 : <span id="nowTimes"></span></h1>

</body>

</html>




# 출력결과







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 파일업로드시 용량 검사하기  (0) 2019.12.26
[JavaScript] 체크박스 전체 선택 - Sample  (0) 2019.12.19
[JavaScript] 전광판 효과 구현하기  (0) 2019.12.05
[JavaScript] AJAX 통신 정리  (0) 2019.11.17
[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기  (43) 2019.06.13
//

[JavaScript] 전광판 효과 구현하기[JavaScript] 전광판 효과 구현하기

Posted at 2019. 12. 5. 13:51 | Posted in JavaScript & jQuery/JavaScript
반응형




출처① : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

출처② : https://balancing425.tistory.com/7

CSS : http://www.dynamicdrive.com/dynamicindex2/crawler/crawler.js





■ 전광판 효과 구현(Marquee 대체)




한때 HTML이 막 유행하던 초창기에 <marquee> 태그가 들어간 싸이트는


뭔가 굉장히 화려한 사이트라고 느껴지던 때가 있었다.


지금은 완전히 묻혔지만.



프로젝트 진행중 marquee와 비슷하지만,


무한 루프처럼 끊이없이 화면에 텍스트 내용이 비춰야 하는

(<marquee> 태그사용시 해당영역에서 모든 내용이 다 사라지고 나서 출력된다.)


상황이 있었기에 필요한 코드를 찾았고 정리해 본다.





# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<style type="text/css">

    span { margin-right:50px; }

</style>

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

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

        marqueeInit({

              uniqueid : "mycrawler"

            , style : {

                 "padding" : "2px"

                , "width" : "600px"

                , "height" : "30px"

            }

            , inc : 5                              // 속도

            , mouse : "cursor driven"       // 마우스 사용여부

            , moveatleast : 2                  // 이동속도

            , neutral : 150

            , savedirection : true             // false를 선언하면 마우스 커서가 위치하는 순간 역방향으로 움직인다.

            , random : false                   // 나오는 순서(기본값 : true)

        });

    });

</script>

</head>

<body>

<h1>■ 전광판 효과</h1>

<div class="marquee" id="mycrawler">

    <span>I'm defying gravity And you can't pull me down!</span>

    <span>이제는 나 중력을 벗어나 날아올라 날개를 펼칠거야</span>

    <span>They'll never bring us down!</span>

    <span>아무도 우릴 막지 못할 거야</span>

    <span>Everyone deserves the chance to fly</span>

    <span>그 누구라도 날아오를 자격이 있잖아!</span>

</div>

</select>

</body>

</html>




# 출력결과








반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 체크박스 전체 선택 - Sample  (0) 2019.12.19
[JavaScript] 실시간 타이머(시계) 만들기  (2) 2019.12.05
[JavaScript] AJAX 통신 정리  (0) 2019.11.17
[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기  (43) 2019.06.13
[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능  (0) 2019.05.23
//

티스토리툴바