드래그 앤 드롭하여 사진 업로드 #JavaScript

우리는 이미지를 업로드하기 위한 아주 기본적인 드래그 앤 드롭 애플리케이션을 만들 것입니다.

1.a) 이미지를 드롭할 영역 생성

<div class="drop-container">
      <span>Drop image here to upload</span>
</div>

<div id="file_name">You haven't uploaded a photo yet.</div>

1.b) 그리고 약간의 스타일 추가

.drop-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 400px;
    width: 100%;
    max-width: 600px;
    font-size: 1.5rem;
    border: 2px dashed rgb(255, 203, 232);
    border-radius: 8px;
}

.drop-container.uploaded {
    border-color: #51cbb0;
    border-style: solid;
}

.drop-container img {
    max-width: 100%;
}

#file_name {
    margin-top: 32px;
}

그것은 다음과 같이 보일 것입니다:


2) 'dragover' 이벤트의 기본 동작 방지
그렇지 않으면 드롭된 이미지가 빈 탭에서 열립니다.

const dropContainer = document.querySelector(".drop-container");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

3) 드롭 시 파일 가져오기
여기서도 기본 동작을 방지해야 합니다.

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file uploaded
  const file = event.dataTransfer.files[0];

  console.log(file)
});

4) 업로드한 미리보기 이미지
파일에 대한 링크를 만들고 이미지로 미리 봅니다.

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file
  const file = event.dataTransfer.files[0];

  // Create link
  const url = window.URL.createObjectURL(file);

  // Create image element
  const image = document.createElement("img");
  image.src = url;

  // Append image as a child to drop area
  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  // Add class to drop container when image uploaded  
  // for updating styles
  dropContainer.classList.add("uploaded");

  // Preview file name and type
  fileName.innerHTML = `${file.name} [${file.type}]`;
});

여기있어. 🎉

5) 추가 부품
파일 형식이 이미지인지 확인

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  let file;

  if (event.dataTransfer.items) {
    const item = event.dataTransfer.items[0];

    const isFile = item.kind === "file";
    const isImage = item.type.split("/")[0] === "image";

    if (isFile && isImage) {
      file = item.getAsFile();
    } else {
      alert("This is not an image!");

      return;
    }
  } else {
    file = event.dataTransfer.files[0];
  }

  const url = window.URL.createObjectURL(file);

  const image = document.createElement("img");
  image.src = url;

  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  dropContainer.classList.add("uploaded");

  fileName.innerHTML = `${file.name} [${file.type}]`;
});

그게 다야 github에서 소스 코드 찾기:
https://github.com/inancakduvan/drag-and-drop-image

팔로우:

Github: https://github.com/inancakduvan/
트위터:

읽어주셔서 감사합니다 🙂