uploadPage.js

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

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

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

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

// 업로드 이미지 파일 preview 표현
function createElement(e, file) {
  const li = document.createElement("li");
  const img = document.createElement("img");
  img.setAttribute("src", e.target.result);
  img.setAttribute("data-file", file.name);
  li.appendChild(img);

  return li;
}

// 클릭시 input 이벤트 발생
const realUpload = document.querySelector(".real-upload");
const upload = document.querySelector(".upload");

upload.addEventListener("click", () => realUpload.click());

realUpload.addEventListener("change", getImageFiles);