[JS] 드래그 앤 드롭으로 이미지 파일 첨부

이곳에 사진을 드래그 앤 드롭하세요.

 

어려운 로직은 아니므로 주석으로 설명 다는 것을 대체함

클래스 추가 및 삭제 부분은 css 적용을 동적으로 하기 위함으로 드래그 앤 드롭과는 연관성 없음.

      const img = document.createElement("img");
      const dropArea = document.getElementById("dropArea");
      const fileInput = document.getElementById("fileInput");

      // 드래그 영역에 파일을 오버하면 콜백함수 호출
      dropArea.addEventListener("dragover", (e) => {
       // 드래그 기본 동작으로 이미지 파일을 브라우저에 드롭하면
       //새로운 브라우저 창이 열리면서 파일이 열린다. 이를 방지하고자
       // 기본동작 이벤트가 발생하지 않도록 막는 것이다.
        e.preventDefault();
        
        dropArea.classList.add("dragover");
        dropArea.classList.remove("drop");
      });

      // 드래그 지역을 벗어나면 콜백함수를 호출하는 이벤트
      dropArea.addEventListener("dragleave", () => {
        dropArea.classList.remove("dragover");
        dropArea.classList.remove("drop");
      });

      // 드래그 영역에서 파일을 드랍하면 콜백함수 호출
      dropArea.addEventListener("drop", (e) => {
        e.preventDefault();
        dropArea.classList.add("drop");

        const files = e.dataTransfer.files; // 첨부한 파일의 정보가 담긴다.
        console.log(files);
        // 첨부한 파일이 존재한다면 실행한다.
        if (files.length > 0) {
          fileInput.files = files; // files 속성의 값으로 첨부할 파일 정보를 할당한다.
          img.src = URL.createObjectURL(files[files.length - 1]); // 이미지 생성
          document.body.appendChild(img); // 생성된 이미지를 body 객체의 마지막 자식요소로 추가
          alert("정상적으로 업로드 되었습니다!");
        }
      });