简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 백엔드 개발 > PHP 튜토리얼 > 본문

바닐라 JavaScript로 파일을 업로드하고 로딩 애니메이션을 추가하는 방법

PHPz
풀어 주다： 2024-08-05 19:00:51
원래의
1119명이 탐색했습니다.

How to Upload Files With Vanilla JavaScript and Add a Loading Animation

파일 업로드는 모든 웹 애플리케이션에서 매우 보편적이며 인터넷(브라우저)을 통해 파일과 리소스를 업로드하는 경우 다소 스트레스를 받을 수 있습니다. 다행스럽게도 HTML 5를 사용하면 사용자가 데이터를 수정할 수 있도록 일반적으로 양식 제어와 함께 제공되는 입력 요소가 리소스 업로드를 단순화하는 데 매우 편리해질 수 있습니다.

이 기사에서는 바닐라 JavaScript를 사용하여 파일 업로드를 처리하는 방법을 자세히 살펴보겠습니다. 목표는 외부 라이브러리 없이 파일 업로드 구성 요소를 구축하는 방법을 가르치고 JavaScript의 몇 가지 핵심 개념도 배우는 것입니다. 또한 업로드 진행 상태를 표시하는 방법도 알아봅니다.

소스 코드: 평소와 같이 프로젝트의 GitHub 저장소에 호스팅된 소스 코드를 수정할 수 있습니다.

프로젝트 설정

먼저 원하는 디렉터리에 프로젝트를 위한 새 폴더를 만듭니다.

$ mkdir file-upload-progress-bar-javascript
로그인 후 복사

이제 프로젝트의 모든 마크업을 작성할 index.html, main.css 및 app.js 파일을 생성하겠습니다.

$ touch index.html && touch main.css && touch app.js
로그인 후 복사

이제 를 사용하여 기본 HTML 템플릿을 생성하여 파일 업로드를 위한 구조 구축을 시작할 수 있습니다. 및 태그:

<!DOCTYPE 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>File Upload with Progress Bar using JavaScript</title>
  </head>
  <body></body>
</html>
로그인 후 복사

다음으로 main.css에 프로젝트의 기본 스타일을 추가합니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
로그인 후 복사

애플리케이션의 모양을 향상시키기 위해 공식 Font Awesome 라이브러리 웹사이트에서 생성할 수 있는 키트 코드를 통해 프로젝트에 추가할 수 있는 Font Awesome 라이브러리의 아이콘을 활용할 것입니다.

이제 index.html이 업데이트되고 main.css 파일이 링크됩니다.

<!DOCTYPE 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" />
    <script
      src="https://kit.fontawesome.com/355573397a.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="main.css">
    <title>File Upload with Progress Bar using JavaScript</title>
  </head>
  <body></body>
</html>
로그인 후 복사

파일 업로더의 구조를 계속 구축합니다.

<!DOCTYPE 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" />
    <script
      src="https://kit.fontawesome.com/355573397a.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="main.css" />
    <title>File Upload with Progress Bar using JavaScript</title>
  </head>
  <body>
    <div class="file-upload__wrapper">
      <header>File Uploader JavaScript with Progress</header>
      <div class="form-parent">
        <form action="#" class="file-upload__form">
            <input class="file-input" type="file" name="file" hidden />
            <i class="fas fa-cloud-upload-alt"></i>
            <p>Browse File to Upload</p>
          </form>
          <div>
            <section class="progress-container"></section>
            <section class="uploaded-container"></section>
          </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>
로그인 후 복사

그런 다음 다음 코드를 복사/붙여넣어 main.css를 업데이트하세요.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background: #cb67e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}
::selection {
  color: white;
  background: #cb67e9;
}
.file-upload__wrapper {
  width: 640px;
  background: #fff;
  border-radius: 5px;
  padding: 35px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
  color: #cb67e9;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
}
.form-parent {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
  height: 150px;
  border: 2px dashed #cb67e9;
  cursor: pointer;
  margin: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  padding: 10px;
}
form.file-upload__form :where(i, p) {
  color: #cb67e9;
}
form.file-upload__form i {
  font-size: 50px;
}
form.file-upload__form p {
  font-size: 1rem;
  margin-top: 15px;
}
section .row {
  background: #e9f0ff;
  margin-bottom: 10px;
  list-style: none;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
}
section .row i {
  font-size: 2rem;
  color: #cb67e9;
}
section .details span {
  font-size: 1rem;
}
.progress-container .row .content-wrapper {
  margin-left: 15px;
  width: 100%;
}
.progress-container .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
  height: 100%;
  background: #cb67e9;
  width: 0%;
  border-radius: 6px;
}
.uploaded-container {
  overflow-y: scroll;
  max-height: 230px;
}
.uploaded-container.onprogress {
  max-height: 160px;
}
.uploaded-container .row .content-wrapper {
  display: flex;
  align-items: center;
}
.uploaded-container .row .details-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
  color: green;
  font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
  color: #404040;
  font-size: 11px;
}
로그인 후 복사

이제 구성요소가 브라우저에서 더 좋아 보일 것입니다.

업로드 기능 추가

프로젝트 업로드에 필요한 기능을 추가하기 위해 이제 app.js 파일을 사용하여 프로젝트에 생명을 불어넣는 JavaScript 코드를 작성합니다.

app.js에 다음을 복사하여 붙여넣으세요.

const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
  myInput.click();
});
myInput.onchange = ({ target }) => {
  let file = target.files[0];
  if (file) {
    let fileName = file.name;
    if (fileName.length >= 12) {
      let splitName = fileName.split(".");
      fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
    }
    uploadFile(fileName);
  }
};
function uploadFile(name) {
  let xhrRequest = new XMLHttpRequest();
  const endpoint = "uploadFile.php";
  xhrRequest.open("POST", endpoint);
  xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
    let fileLoaded = Math.floor((loaded / total) * 100);
    let fileTotal = Math.floor(total / 1000);
    let fileSize;
    fileTotal < 1024
      ? (fileSize = fileTotal + " KB")
      : (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
    let progressMarkup = `<li class="row">
                          <i class="fas fa-file-alt"></i>
                          <div class="content-wrapper">
                            <div class="details-wrapper">
                              <span class="name">${name} | <span>Uploading</span></span>
                              <span class="percent">${fileLoaded}%</span>
                            </div>
                            <div class="progress-bar-wrapper">
                              <div class="progress-wrapper" style="width: ${fileLoaded}%"></div>
                            </div>
                          </div>
                        </li>`;
    uploadedContainer.classList.add("onprogress");
    progressContainer.innerHTML = progressMarkup;
    if (loaded == total) {
      progressContainer.innerHTML = "";
      let uploadedMarkup = `<li class="row">
                            <div class="content-wrapper upload">
                              <i class="fas fa-file-alt"></i>
                              <div class="details-wrapper">
                                <span class="name">${name} | <span>Uploaded</span></span>
                                <span class="file-size">${fileSize}</span>
                              </div>
                            </div>
                          </li>`;
      uploadedContainer.classList.remove("onprogress");
      uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup);
    }
  });
  let data = new FormData(uploadForm);
  xhrRequest.send(data);
}
로그인 후 복사

우리는 파일 입력 요소를 사용하여 선택한 파일을 읽고 DOM에 새로운 파일 목록을 생성할 수 있게 되었습니다. 파일 업로드 중에는 진행 상태가 표시되며, 파일 업로드가 완료되면 진행 상태가 업로드됨으로 변경됩니다.

그런 다음 프로젝트에 uploadFile.php를 추가하여 파일 전송을 위한 엔드포인트를 모의합니다. 그 이유는 진행 로딩 효과를 얻을 수 있도록 프로젝트의 비동기성을 시뮬레이션하기 위한 것입니다.

<?php
  $file_name =  $_FILES['file']['name'];
  $tmp_name = $_FILES['file']['tmp_name'];
  $file_up_name = time().$file_name;
  move_uploaded_file($tmp_name, "files/".$file_up_name);
?>
로그인 후 복사

결론

이 기사를 여기까지 읽어오시느라 정말 수고하셨습니다.

이 튜토리얼에서는 파일 업로드 구성 요소를 구축하고 진행률 표시줄을 추가하는 방법을 배웠습니다. 이는 웹사이트를 구축하고 사용자가 소속감을 느끼고 파일 업로드가 얼마나 느리거나 빠른지 파악하기를 원할 때 유용할 수 있습니다. 원할 때 언제든지 이 프로젝트를 재사용할 수 있습니다.

이 튜토리얼을 진행하는 동안 문제가 발생하면 GitHub에 프로젝트를 업로드하여 다른 개발자의 도움을 받거나 저에게 DM을 보내셔도 기꺼이 도와드리겠습니다.

다음은 해당 프로젝트의 GitHub 저장소 링크입니다.

관련 리소스

  • FontAwesome Docs

위 내용은 바닐라 JavaScript로 파일을 업로드하고 로딩 애니메이션을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：Laravel 캐시를 지우는 방법은 무엇입니까? 다음 기사：PHP 집중 강좌: 간단한 환율 변환기
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1774
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1917
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1629
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1540
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1575
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！