본문 바로가기
프로그래밍/자바스크립트

프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 미리보기로 파일 업로드 드래그 앤 드롭

by grapedoukan 2023. 6. 17.
728x90

안녕하세요 코더입니다. 이 튜토리얼에서는 Html, Cs 및 JavaScript를 사용하여 다운로드 기능으로 드래그 앤 드롭 또는 찾아보기 업로드 파일을 만드는 방법을 배웁니다. 드래그 앤 드롭은 자바스크립트를 사용하여 드래그 앤 드롭 파일을 만들기 위해 양식, CSS 및 자바스크립트 개념의 개념을 지우는 데 사용되는 초보자 프로젝트입니다.

JavaScript를 사용하여 미리 보기로 파일 업로드 끌어서 놓기[/caption]

프로젝트를 시작하기 전에 드래그 앤 드롭 파일 업로드가 무엇이며 어떻게 만드는지 이해해야 합니다. 드래그 앤 드롭 파일 업로드는 파일을 드래그 앤 드롭하여 제출할 수 있음을 의미합니다. 를 웹 페이지로 이동합니다. 대부분의 웹 사이트에는 이러한 종류의 파일 업로드 기능이 있습니다.

드래그 앤 드롭 파일 업로드란 무엇입니까?

드래그 앤 드롭 파일 업로드는 파일을 제자리에 끌어다 놓는 기능을 말합니다. 웹 응용 프로그램은 끌어서 놓기 인터페이스를 사용하여 파일을 웹 페이지로 끌어다 놓을 수 있습니다. 대부분의 웹 사이트에는 이러한 종류의 파일 업로드 기능이 있습니다. 몇 줄의 JavaScript 코드로 이러한 종류의 드래그 앤 드롭 파일 업로드 기능을 구성할 수 있는 여러 JavaScript 프레임워크가 있지만 이 블로그 게시물에서는 순수 JavaScript만 사용하여 수행하는 방법을 보여 드리겠습니다.

프로젝트를 빌드하는 단계

이 기사는 순전히 초보자를 위한 것입니다. 전문가가 프로젝트를 구축하는 방법을 알려드립니다. 그들이 가장 먼저 염두에 두는 것은 관리입니다. 프로젝트 관리는 모든 코더가 따르는 첫 번째 단계입니다. 프로젝트 관리가 필요합니다. 프로젝트를 관리하려면 HTML, CSS 및 Javascript에 대해 서로 다른 파일을 만들어야 합니다.

필수 구성 요소:

index.html — 프로젝트 스타일에 구조를 추가하는 경우.css: 프로젝트

스크립트에 스타일을 추가하는 데 사용됩니다.js — 드래그 앤 드롭 또는 찾아보기 기능 추가

이제 프로젝트가 수반하는 것에 대한 일반적인 아이디어를 얻었기를 바랍니다. 이 기사에서는이 프로젝트를 단계별로 살펴 보겠습니다.

1단계: 기본 HTML 코드 추가

HTML은 HyperText Markup Language의 약자입니다. 이것은 마크업 언어입니다. 주요 임무는 프로젝트 구조를 제공하는 것입니다. 우리는 이 마크업 언어를 활용하여 프로젝트 구조를 제공할 것입니다. 이제 HTML 코드를 살펴보겠습니다.

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag, Drop & Browse</title>
    
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css" />
</head><body>
    <div class="container">
        <h3>Upload your File :</h3>
        <div class="drag-area">
            <div class="icon">
                <i class="fas fa-images"></i>
            </div>            <span class="header">Drag & Drop</span>
            <span class="header">or <span class="button">browse</span></span>
            <input type="file" hidden />
            <span class="support">Supports: JPEG, JPG, PNG</span>
        </div>
        <div>
            <button class="download">Download</button>
        </div>
    </div>
    <script src="index.js"></script>
</body></html>

HTML부터 시작하겠습니다. index.html 파일 내에서 HTML 문서의 기본 구조를 만들고 html, head, title 및 body 태그를 추가합니다. 아래 단계를 따르십시오.

검색 상자 프로젝트를 시작하기 전에 특정 링크를 업데이트해야 합니다. 이 프로젝트를 완료하기 위해 HTML, CSS 및 JavaScript에 사용한 세 가지 개별 파일을 연결해야 했습니다. 이를 위해 헤더 안에 CSS에 대한 링크를 배치하십시오.

프로젝트에서 사용한 다양한 아이콘에 대한 모든 링크를 포함해야 합니다. HTML 파일에 연결하려면 HTML 본문 안에 Javascript 파일을 포함해야 합니다.

//Head section 
<link rel="stylesheet" href="style.css"> 
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>	
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script> 
//Body Section 
<script src="index.js"></script>

이제 드래그 앤 드롭 또는 찾아보기 프로젝트에 대한 구조를 추가해 보겠습니다.

우리는 드래그 앤 드롭 프로젝트의 구조를 추가하기 위해 기본 html 요소를 사용할 것입니다

  • 드래그 앤 드롭 구조에 대한 컨테이너를 만들려면 div 태그를 사용합니다.
  • h3 태그를 사용하여 프로젝트에 대한 작은 제목을 만듭니다.
  • 이제 div 태그를 사용하여 파일을 끌어다 놓을 영역을 만듭니다.
  • Font-awesome 클래스를 사용하여 이미지 아이콘을 사용하고 span 태그를 사용하여 사용자가 파일을 끌어다 놓을 수 있는 작은 캡션을 추가합니다.
  • 이제 사용자가 "button" 클래스와 함께 span 요소를 사용하여 시스템에서 파일을 선택할 수 있는 버튼을 만들 것입니다.
  • 또한 사용자가 제출할 수 있는 파일의 종류를 알려주는 약간의 notusing-the-span 태그도 포함됩니다.
  • 버튼을 사용하여 이미지에 대한 다운로드 버튼을 만듭니다.

우리는 드래그 앤 드롭 또는 브라우징을 위한 구조를 구축하기 위해 다른 것을 요구하지 않습니다. 이제 CSS를 사용하고 있으므로 클립보드에 복사 버튼의 스타일을 지정합니다. 그러나 먼저 우리의 구조를 살펴 보겠습니다.

JavaScript를 사용하여 미리 보기로 파일 업로드 끌어서 놓기[/caption]

2단계: CSS 코드 추가

CSS(Cascading Style Sheets)는 HTML 또는 XML로 작성된 문서의 표현을 설명하기 위한 마크업 언어입니다. HTML 및 JavaScript와 같은 CSS는 World Wide Web의 핵심 구성 요소입니다.

이제 CSS 코드를 살펴보겠습니다.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background: #e0eafc; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}.container {
  max-width: 650px;
  width: 100%;
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}.drag-area {
  height: 400px;
  border: 3px dashed #e0eafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 10px auto;
}h3 {
  margin-bottom: 20px;
  font-weight: 500;
}.drag-area .icon {
  font-size: 50px;
  color: #1683ff;
}.drag-area .header {
  font-size: 20px;
  font-weight: 500;
  color: #34495e;
}.drag-area .support {
  font-size: 12px;
  color: gray;
  margin: 10px 0 15px 0;
}.drag-area .button {
  font-size: 20px;
  font-weight: 500;
  color: #1683ff;
  cursor: pointer;
}.drag-area.active {
  border: 2px solid #1683ff;
}.drag-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.download {
  background-color:#4CAF50;
  border: none;
  color: white;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 3px 1px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
}

CSS 코드를 추가한 후 단계별로 살펴보겠습니다. 시간을 절약하기 위해 이 코드를 복사하여 IDE에 붙여넣기만 하면 됩니다. 이제 코드를 단계별로 살펴보겠습니다.

클립보드 사본에 몇 가지 기본 스타일을 추가할 예정이지만 새로운 스타일을 시도하고 주석에서 코드를 공유하면 다른 사람들이 즉시 생각하고 자신의 스타일을 추가하는 데 도움이 됩니다.

1 단계 : 가중치가 200, 300, 400 및 500인 사용자 지정 Google 글꼴(예: Poppins)을 사용합니다. 이제 프로젝트 내에 이 Google 글꼴을 추가하려면 Google 가져오기 링크를 사용하여 가져와야 합니다.

이제 범용 선택기를 사용하여 전체 페이지에 대해 패딩과 여백을 0으로 설정하고 box-sizing 속성을 사용하여 border-box를 추가하고 font-family 속성을 사용하여 글꼴 패밀리를 "Poppins"로 설정합니다.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

2 단계 : body 선택기를 사용하여 디스플레이를 "flex"로 설정하고 align-item 속성을 사용하여 항목을 중앙에 정렬하고 flex-direction 속성을 사용하여 방향을 열 단위로 설정합니다. 웹 페이지 본문에 밝은 그라데이션 배경을 추가합니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background: #e0eafc; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

3 단계 : 이제 컨테이너와 구조의 다른 모든 요소에 스타일을 추가합니다. 클래스 선택기(.container)를 사용하여 컨테이너의 최대 너비를 650px로 설정하고 실제 너비를 100%로 설정합니다. 또한 30px의 패딩과 흰색 배경을 추가했습니다. 상자 그림자 속성을 사용하여 컨테이너에 상자 그림자도 추가했습니다.\

이제 파일 드래그 영역에 스타일을 추가하고 높이를 400px로 설정하고 border 속성을 사용하여 연한 파란색으로 너비가 3px인 점선 테두리를 추가하고 align item 속성을 사용하여 항목을 중앙에 정렬합니다. 여백을 사용하여 드래그 영역 외부에 10px의 여백이 추가되었습니다.

.container {
  max-width: 650px;
  width: 100%;
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.drag-area {
  height: 400px;
  border: 3px dashed #e0eafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 10px auto;
}

4 단계 : 이제 font-size를 500으로 설정하고 태그 선택기(h20)를 사용하여 3픽셀의 하단 여백을 추가합니다(더 굵게 만듦).

이제 아이콘의 색상과 텍스트 크기가 클래스(.icon)를 사용하여 진한 파란색으로 조정됩니다. 버튼과 지원 섹션에 적용한 스타일은 비슷합니다. 코드를 한 번만 읽으면 파악할 수 있습니다.

h3 {
  margin-bottom: 20px;
  font-weight: 500;
}
.drag-area .icon {
  font-size: 50px;
  color: #1683ff;
}.drag-area .header {
  font-size: 20px;
  font-weight: 500;
  color: #34495e;
}.drag-area .support {
  font-size: 12px;
  color: gray;
  margin: 10px 0 15px 0;
}.drag-area .button {
  font-size: 20px;
  font-weight: 500;
  color: #1683ff;
  cursor: pointer;
}.drag-area.active {
  border: 2px solid #1683ff;
}.drag-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.download {
  background-color:#4CAF50;
  border: none;
  color: white;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 3px 1px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
}

3단계: 자바스크립트 코드

이 프로젝트의 가장 중요한 구성 요소는 JavaScript입니다. Javascript를 사용하여 원하는 방식으로 작동하도록 수정할 수 있습니다. 단계는 다음과 같습니다.

const dropArea = document.querySelector(".drag-area");
const dragText = document.querySelector(".header");
let button = dropArea.querySelector(".button");
let input = dropArea.querySelector("input");let file;button.onclick = () => {
  input.click();
};// when browse
input.addEventListener("change", function () {
  file = this.files[0];
  dropArea.classList.add("active");
  displayFile();
});// when file is inside drag area
dropArea.addEventListener("dragover", (event) => {
  event.preventDefault();
  dropArea.classList.add("active");
  dragText.textContent = "Release to Upload";
  // console.log('File is inside the drag area');
});// when file leave the drag area
dropArea.addEventListener("dragleave", () => {
  dropArea.classList.remove("active");
  // console.log('File left the drag area');
  dragText.textContent = "Drag & Drop";
});// when file is dropped
dropArea.addEventListener("drop", (event) => {
  event.preventDefault();
  // console.log('File is dropped in drag area');  file = event.dataTransfer.files[0]; // grab single file even of user selects multiple files
  // console.log(file);
  displayFile();
});function displayFile() {
  let fileType = file.type;
  // console.log(fileType);  let validExtensions = ["image/jpeg", "image/jpg", "image/png"];  if (validExtensions.includes(fileType)) {
    // console.log('This is an image file');
    let fileReader = new FileReader();    fileReader.onload = () => {
      let fileURL = fileReader.result;
      // console.log(fileURL);
      let imgTag = `<img src="${fileURL}" alt="">`;
      dropArea.innerHTML = imgTag;
    };
    fileReader.readAsDataURL(file);
  } else {
    alert("This is not an Image File");
    dropArea.classList.remove("active");
  }
}

document.queryselector 메서드를 사용하여 먼저 필요한 모든 DOM 구성 요소를 선택하는 것으로 시작합니다. 또한 각 HTML 요소의 값을 저장하는 변수가 만들어집니다.

이제 버튼과 입력 태그를 선택하기 위해 쿼리 선택기와 함께 dropArea를 사용하여 찾아보기 버튼을 선택합니다.

const dropArea = document.querySelector(".drag-area");
const dragText = document.querySelector(".header");
let button = dropArea.querySelector(".button");
let input = dropArea.querySelector("input");let file;

이제 드래그 앤 드롭 기능이 먼저 구현됩니다. 파일을 저장하고 표시하려면 별도의 함수를 만듭니다. 업로드에 허용하려는 모든 허용 가능한 파일 형식은 함수 내에서 정의됩니다.

세 개의 이벤트 리스너가 정의되며, 그 중 하나는 파일이 드래그 영역에 들어갈 때 모니터링합니다. 하나는 끌기 영역이 입력될 때 추적하는 데 사용되고, 다른 하나는 사용자가 끌기 영역 안에 파일을 놓을 때 추적하는 데 사용됩니다.

// when file is inside drag area
dropArea.addEventListener("dragover", (event) => {
  event.preventDefault();
  dropArea.classList.add("active");
  dragText.textContent = "Release to Upload";
  // console.log('File is inside the drag area');
});
// when file leave the drag area
dropArea.addEventListener("dragleave", () => {
  dropArea.classList.remove("active");
  // console.log('File left the drag area');
  dragText.textContent = "Drag & Drop";
});// when file is dropped
dropArea.addEventListener("drop", (event) => {
  event.preventDefault();
  // console.log('File is dropped in drag area');  file = event.dataTransfer.files[0]; // grab single file even of user selects multiple files
  // console.log(file);
  displayFile();
});function displayFile() {
  let fileType = file.type;
  // console.log(fileType);  let validExtensions = ["image/jpeg", "image/jpg", "image/png"];  if (validExtensions.includes(fileType)) {
    // console.log('This is an image file');
    let fileReader = new FileReader();    fileReader.onload = () => {
      let fileURL = fileReader.result;
      // console.log(fileURL);
      let imgTag = `<img src="${fileURL}" alt="">`;
      dropArea.innerHTML = imgTag;
    };
    fileReader.readAsDataURL(file);
  } else {
    alert("This is not an Image File");
    dropArea.classList.remove("active");
  }

찾아보기 기능을 실행해 보겠습니다. 찾아보기 버튼을 눌렀을 때 파일 입력을 클릭하고 파일 탐색기를 여는 것을 모방합니다. 사용자가 파일을 선택하면 change 이벤트를 기다린 다음 표시 기능을 실행합니다.

let file;
button.onclick = () => {
  input.click();
};// when browse
input.addEventListener("change", function () {
  file = this.files[0];
  dropArea.classList.add("active");
  displayFile();
});

이제 JavaScript를 사용하여 드래그 앤 드롭 파일 프로젝트를 완료했습니다. 전체 프로젝트를 이해하셨기를 바랍니다. 라이브 미리보기를 살펴보겠습니다.

우리는 또한 당신이 찾을 수있는 기사를 만들었습니다 10+ 프론트 엔드 프로젝트 . 재설정한 경우 아래 링크를 확인할 수 있습니다.

이 블로그가 도움이 되었다면 Google에서 codewithrandom을 검색하여 소스 코드가 있는 프런트 엔드 프로젝트를 검색하고 Follow the Code with Random Instagram 페이지를 확인하십시오.

팔로우 : CodeWithRandom

작성자 : Arun

코드 작성자: BWstreet

드래그 앤 드롭 파일 업로드란 무엇입니까?

드래그 앤 드롭 파일 업로드는 파일을 제자리에 끌어다 놓는 기능을 말합니다. 웹 응용 프로그램은 끌어서 놓기 인터페이스를 사용하여 파일을 웹 페이지로 끌어다 놓을 수 있습니다. 대부분의 웹 사이트에는 이러한 종류의 파일 업로드 기능이 있습니다

업로드 파일 섹션을 만드는 방법은 무엇입니까?

파일 업로드 섹션은 입력 유형을 "파일"로 사용하는 양식 태그를 사용하여 생성됩니다.

728x90
저작자표시

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

프로그래밍 「 자바스크립트 편」CSS 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만드는 방법  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」CSS를 사용하여 스크롤 애니메이션 만들기  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」GraalVM 언어의 새로운 기능  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」HTML 코드를 사용하는 난수 생성기  (1) 2023.06.17
프로그래밍 「 자바스크립트 편」Chrome 확장 프로그램 개발을 위한 고급 기술: 종합 가이드  (0) 2023.06.17

관련글

티스토리툴바