如何使用 Vanilla JavaScript 上傳檔案並新增載入動畫-php教程-PHP中文網

首頁

後端開發

php教程

如何使用 Vanilla JavaScript 上傳檔案並新增載入動畫

PHPz

Aug 05, 2024 pm 07:00 PM

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

檔案上傳對於任何 Web 應用程式來說都是非常普遍的，當透過網路（在瀏覽器上）上傳檔案和資源時，事情可能會有些壓力。幸運的是，有了 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 上尋求其他開發者的幫助，或者你也可以向我發送私訊，我很樂意為你提供幫助。

這是該專案的 GitHub 儲存庫的連結。

熱AI工具

熱工具

熱門話題

Java教學

1655

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1226

Related knowledge

在PHP API中說明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一種基於JSON的開放標準，用於在各方之間安全地傳輸信息，主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時，可以生成和驗證JWT，並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大，調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、

會話如何劫持工作，如何在PHP中減輕它？ Apr 06, 2025 am 12:02 AM

會話劫持可以通過以下步驟實現：1.獲取會話ID，2.使用會話ID，3.保持會話活躍。在PHP中防範會話劫持的方法包括：1.使用session_regenerate_id()函數重新生成會話ID，2.通過數據庫存儲會話數據，3.確保所有會話數據通過HTTPS傳輸。

什麼是REST API設計原理？ Apr 04, 2025 am 12:01 AM

RESTAPI設計原則包括資源定義、URI設計、HTTP方法使用、狀態碼使用、版本控制和HATEOAS。 1.資源應使用名詞表示並保持層次結構。 2.HTTP方法應符合其語義，如GET用於獲取資源。 3.狀態碼應正確使用，如404表示資源不存在。 4.版本控制可通過URI或頭部實現。 5.HATEOAS通過響應中的鏈接引導客戶端操作。

PHP中的匿名類是什麼？您何時可以使用它們？ Apr 04, 2025 am 12:02 AM

匿名類在PHP中的主要作用是創建一次性使用的對象。 1.匿名類允許在代碼中直接定義沒有名字的類，適用於臨時需求。 2.它們可以繼承類或實現接口，增加靈活性。 3.使用時需注意性能和代碼可讀性，避免重複定義相同的匿名類。

您如何在PHP中有效處理異常（嘗試，捕捉，最後，投擲）？ Apr 05, 2025 am 12:03 AM

在PHP中，異常處理通過try,catch,finally,和throw關鍵字實現。 1)try塊包圍可能拋出異常的代碼；2)catch塊處理異常；3)finally塊確保代碼始終執行；4)throw用於手動拋出異常。這些機制幫助提升代碼的健壯性和可維護性。

包括，require，incement_once，require_once之間有什麼區別？ Apr 05, 2025 am 12:07 AM

在PHP中，include,require,include_once,require_once的區別在於：1)include產生警告並繼續執行，2)require產生致命錯誤並停止執行，3)include_once和require_once防止重複包含。這些函數的選擇取決於文件的重要性和是否需要防止重複包含，合理使用可以提高代碼的可讀性和可維護性。