6월 16일 TIL - 인풋 필수입력, 이미지 미리보기

▷ 오늘의 시도

! 폼 데이터를 제출할 때 인풋 태그에 reqired를 주어서 필수 입력값이 되게 하기 !

이렇게 하려고 하면 버튼 타입이 submit이어야하는데 현재 글 작성 버튼은 버튼타입으로 설정되어 있었다. 그래서 버튼을 눌러서 발생하는 이벤트가 살짝 변형되어져야 했다. submit을 했을 때 새로고침되는 이벤트를 없애주고 백으로 포스트형식으로 요청을 보내도록 고쳐중었다.

 

! 이미지 제출시 미리보기!

js에서 인풋태그를 가져와서 .addEventListener를 추가해준다. 발생되는 이벤트는 이미지파일을 읽고 그 파일을 html에 띄어주는 함수이다.

function getImageFiles(e) {
    const uploadFiles = [];
    const files = e.currentTarget.files;
    const imagePreview = document.querySelector('#image-preview');
    const docFrag = new DocumentFragment();

    if ([...files].length >= 10) {
        alert('이미지는 최대 9개 까지 업로드가 가능합니다.');
        return;
    }

    // 파일 타입 검사
    [...files].forEach(file => {
        if (!file.type.match("image/.*")) {
            alert('이미지 파일만 업로드가 가능합니다.');
            return
        }

        // 파일 갯수 검사
        if ([...files].length < 10) {
            uploadFiles.push(file);
            const reader = new FileReader();
            imagePreview.innerHTML = ''
            reader.onload = (e) => {
                const preview = createElement(e, file);
                imagePreview.appendChild(preview);
            };
            reader.readAsDataURL(file);
        }
    });
}

function createElement(e, file) {
    const div = document.createElement('div');
    div.setAttribute('class', 'col')
    const div2 = document.createElement('div');
    div2.setAttribute('style', 'height:150px; width:150px;')
    div.appendChild(div2)
    const img = document.createElement('img');
    img.setAttribute('src', e.target.result);
    img.setAttribute('class', 'cardimg img-thumbnail');
    img.setAttribute('data-file', file.name);
    div2.appendChild(img);

    return div;
}
const imageUpload = document.getElementById("images");
imageUpload.addEventListener('change', getImageFiles);