آپلود فایل با جاوا اسکریپت Vanilla و بارگذاری انیمیشن PlatoBlockchain Data Intelligence. جستجوی عمودی Ai.

آپلود فایل با جاوا اسکریپت Vanilla و بارگذاری انیمیشن

تمبر زمان: 1 دسامبر 2022، 10:30 بعد از ظهر

آپلود فایل در هر برنامه وب بسیار فراگیر است و وقتی صحبت از آپلود فایل ها و منابع از طریق اینترنت (در مرورگر) می شود، همه چیز می تواند تا حدودی استرس زا باشد. خوشبختانه، با HTML 5، عناصر ورودی که معمولاً با کنترل فرم همراه هستند تا به کاربران اجازه تغییر داده ها را بدهند، می توانند در ساده سازی منابع آپلود بسیار مفید باشند.

در این مقاله، ما نگاهی دقیق تر به نحوه مدیریت آپلود فایل با استفاده از وانیلی جاوا اسکریپت خواهیم داشت. هدف این است که به شما یاد دهیم چگونه یک جزء آپلود فایل را بدون نیاز به کتابخانه خارجی بسازید و همچنین برخی از مفاهیم اصلی را در جاوا اسکریپت یاد بگیرید. همچنین یاد خواهید گرفت که چگونه وضعیت پیشرفت یک آپلود را در صورت وقوع نشان دهید.

بیایید شروع کنیم، مردم!

راه اندازی پروژه

اول از همه، در پوشه دلخواه خود، یک پوشه جدید برای پروژه ایجاد کنید:

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

برای بهبود ظاهر برنامه‌هایمان، از نمادهای کتابخانه عالی فونت استفاده می‌کنیم که می‌توانیم از طریق یک کد کیت که می‌تواند در وب‌سایت رسمی کتابخانه عالی فونت ایجاد شود، به پروژه خود اضافه کنیم.

اکنون، 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;
}

اکنون، کامپوننت در مرورگر به شکل زیر است:

راهنمای عملی و عملی ما برای یادگیری Git را با بهترین روش ها، استانداردهای پذیرفته شده در صنعت و برگه تقلب شامل بررسی کنید. دستورات Google Git را متوقف کنید و در واقع یاد گرفتن آی تی!

برای افزودن عملکرد مورد نیاز برای آپلود در پروژه خود، اکنون از آن استفاده می کنیم app.js فایل، جایی که کدهای جاوا اسکریپت را می نویسیم که به پروژه ما حیات می بخشد.

موارد زیر را در آن کپی/پیست کنید 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 = `
  • 
                          
                          
    
                            
    
                              ${name} | Uploading
                              ${fileLoaded}%
                            
    
                            
    
                              <div class="progress-wrapper" style="width: ${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 به پروژه ما برای تمسخر یک نقطه پایانی برای ارسال فایل ها. دلیل این امر این است که ناهمزمانی را در پروژه خود شبیه سازی کنیم تا اثر بارگذاری پیشرفت را بدست آوریم.

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

    آپلود فایل با جاوا اسکریپت Vanilla و بارگذاری انیمیشن PlatoBlockchain Data Intelligence. جستجوی عمودی Ai.

    نتیجه

    شما برای رسیدن به این نقطه از این مقاله بسیار عالی بوده اید.

    در این آموزش یاد گرفتیم که چگونه کامپوننت آپلود فایل را بسازیم و یک نوار پیشرفت به آن اضافه کنیم. این می تواند زمانی مفید باشد که شما وب سایت می سازید و می خواهید کاربران شما احساس کنند که درگیر هستند و درک کنند که آپلود فایل چقدر کند یا سریع انجام می شود. در صورت تمایل می توانید از این پروژه مجددا استفاده کنید.

    اگر در حین دنبال کردن این آموزش گیر کردید، پیشنهاد می کنم پروژه خود را برای کمک سایر توسعه دهندگان در GitHub آپلود کنید یا می توانید یک dm نیز ارسال کنید.

    در اینجا یک لینک به مخزن GitHub برای پروژه.

    منابع مرتبط

    تمبر زمان:

    بیشتر از Stackabuse