자바기반의 웹&앱 응용 SW개발자 양성과정 64일차 -96

 

이벤트 트리거

 

브라우저마다 파일을 입력하는 폼이 다르며 선택 상자를 직접적으로 컨트롤할 수 없기에

다른 버튼을 만들고 기능을 전달해주는 트리거가 존재합니다.

 

 

마우스 이벤트 객체를 만들어서 사용해야 합니다.

 

    triggerBtn.addEventListener("click", function () {



        let event = new MouseEvent("click", {

            'view': window,

            'bubbles': true,

            'cancelable': true

        });




        profileBtn.dispatchEvent(event)



    })

 

또한 이미지를 올렸을 때 미리보기가 가능하도록 구현할 수 있습니다.

 

let reader = new FileReader();

    reader.onload = (readerEvent) => {
        img.setAttribute('src', readerEvent.target.result);
    };

    profileBtn.addEventListener("change", (changeEvent) => {

        let imgFile = changeEvent.target.files[0];
        reader.readAsDataURL(imgFile);
    });

파일 리더 객체를 생성합니다. img속성의 src의 값으로 파일을 읽은 결괏값 즉 dataURL을 넣어줍니다.

그러면 올리는 순간 비동기로 미리보기가 가능해집니다.

 

imgFile은 fileList객체인데 만약 인풋 박스에 multiple를 붙이면 여러 개의 파일을 전송할 수 있습니다.

따라서 유사 배열처럼 객체가 보이게 되는데 일단 한 개만 보내기 때문에 0번째 인덱스의 파일을 사용합니다.

그다음 파일 리더를 이용해 가져온 파일을 url로 변환해주어 img src의 넣어주게 되는 것입니다.

 

 

 

D-none 보통 display : none이라고 하는 이 문장 자체는 자주 사용됩니다.

input class="input d-none"으로 사용됐을 때  css에서. input {display : flex}로 적용되어있다면 d-none이 무시됩니다.

둘 다 디스플레이를 적용하지만 flex가 우선순위가 높습니다.

 

* 파일 버튼의 이벤트를 click으로 주게 된다면 click시 이벤트가 발생하므로 파일 선택 전이므로 에러가 발생할 수 있습니다.

따라서 oninput으로 주는 것이 방법입니다.

 

 

자바스크립트는 정규식을 지원한다.

 

var regEx = new RegExp("image/(jpg|png|gif)");

file.type.math(regEx);

 

라는코드로 들어온 이미지가 정규식에 일치하는지 확인할 수 있다.

 

 

정규식에서 쓰이는 메소드MethodDescription

exec	대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
test	대응되는 문자열이 있는지 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다.
match	대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
search	대응되는 문자열이 있는지 검사하는 String 메서드입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.
replace	대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.
split	정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.