Загрузка файлов очень распространена в любом веб-приложении, и когда дело доходит до загрузки файлов и ресурсов через Интернет (в браузере), ситуация может быть несколько напряженной. К счастью, в 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-шаблон с тегами

и :

Далее добавляем базовые стили проекта в main.css:

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

Чтобы улучшить внешний вид наших приложений, мы будем использовать значки из библиотеки Font Awesome, которые мы можем добавить в наш проект с помощью кода набора, который можно создать на официальном веб-сайте библиотеки шрифтов Awesome.

Теперь index.html обновлен и связан файл main.css:

Продолжаем создавать структуру для загрузки файлов:

  
    
    
    
    
    
    
  
  
    

      
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); }

Мы получили возможность прочитать файл, выбранный с помощью элемента ввода файла, и создать новый список файлов в DOM. Когда файл загружается, отображается уровень прогресса, а когда файл завершен, статус прогресса меняется на «Загружено».

Затем мы также добавляем в наш проект файл uploadFile.php, чтобы имитировать конечную точку для отправки файлов. Причиной этого является имитация асинхронности в нашем проекте, чтобы мы получили эффект загрузки прогресса.

Заключение

Как здорово, что вы дочитали до этого момента статьи.

В этом уроке вы узнали, как создать компонент загрузки файлов и добавить к нему индикатор выполнения. Это может быть полезно, когда вы создаете веб-сайты и хотите, чтобы ваши пользователи чувствовали себя вовлеченными и понимали, насколько медленно или быстро происходит загрузка файла. Не стесняйтесь повторно использовать этот проект, когда захотите.

Если вы застряли при выполнении этого руководства, я предлагаю вам загрузить свой проект на GitHub для получения помощи от других разработчиков или вы также можете отправить мне личное сообщение, я буду рад помочь.

Вот ссылка на репозиторий проекта на GitHub.

Соответствующие ресурсы

• Документация FontAwesome