如何使用 Vanilla JavaScript 上传文件并添加加载动画

为了在我们的项目中添加上传所需的功能，我们现在使用 app.js 文件，我们在其中编写 JavaScript 代码，为我们的项目赋予生命。

我们所做的是能够读取使用文件输入元素选择的文件，并在 DOM 上创建新的文件列表。文件正在上传时，会显示进度级别，文件上传完成后，进度状态会变为已上传。

然后，我们还将 uploadFile.php 添加到我们的项目中以模拟发送文件的端点。这样做的原因是为了在我们的项目中模拟异步，从而得到进度加载的效果。

结论

在本教程中，您学习了如何构建文件上传组件并为其添加进度条。当您构建网站并希望用户有参与感并了解上传文件的速度有多慢或多快时，这可能很有用。您可以随时重复使用该项目。

如果您在学习本教程时遇到困难，我建议您将您的项目上传到 GitHub 上以寻求其他开发人员的帮助，或者您也可以向我发送一条私信，我很乐意为您提供帮助。

如何使用 Vanilla JavaScript 上传文件并添加加载动画

发布于2024-11-08

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 模板来构建文件上传的结构：


  
    
    
    
    File Upload with Progress Bar using JavaScript

接下来，我们在main.css中添加项目的基本样式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

为了增强应用程序的外观，我们将使用 font Awesome 库中的图标，我们可以通过在官方 font Awesome 库网站上创建的套件代码将其添加到我们的项目中。

现在，index.html已更新，并且main.css文件已链接：


  
    
    
    
    
    
    File Upload with Progress Bar using JavaScript

我们继续构建文件上传器的结构：


  
    
    
    
    
    
    File Upload with Progress Bar using JavaScript
  
  
    
      File Uploader JavaScript with Progress
      
        
            
            
            Browse File to Upload

然后，复制/粘贴以下代码来更新 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 
                          
                          
                            
                              ${name} | Uploading
                              ${fileLoaded}%
                            
                            
                              
                            
                          
                        `;
    uploadedContainer.classList.add("onprogress");
    progressContainer.innerHTML = progressMarkup;
    if (loaded == total) {
      progressContainer.innerHTML = "";
      let uploadedMarkup = `

${name} | Uploaded ${fileSize}

`; uploadedContainer.classList.remove("onprogress"); uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup); } }); let data = new FormData(uploadForm); xhrRequest.send(data); }

然后，我们还将 uploadFile.php 添加到我们的项目中以模拟发送文件的端点。这样做的原因是为了在我们的项目中模拟异步，从而得到进度加载的效果。