Nếu bạn đang xây dựng bất kỳ loại hình ảnh tải lên cho một trang web, bạn sẽ nhanh chóng nhận ra rằng một đầu vào tệp cơ bản không đủ. Khoảnh khắc một người dùng cố gắng tải lên một tệp lớn, trải nghiệm bị phá vỡ. Họ nhấp vào "Tải lên", trình duyệt dường như treo, và họ không có ý tưởng nếu nó đang hoạt động hoặc bị hỏng. Đây là chính xác thời điểm bạn nhận ra bạn cần một thanh tiến độ. Vấn đề là, xây dựng một từ đầu là một cái bẫy nhà phát triển cổ điển.Nó có vẻ đơn giản, nhưng bạn sớm thấy mình sâu trong cỏ dại của đối tượng, người nghe sự kiện và thao tác DOM. Đó là một tấn boilerplate cho một tính năng mà chỉ nên là tiêu chuẩn. XMLHttpRequest Hãy đi bộ qua làm thế nào để xây dựng một cách thủ công, và sau đó tôi sẽ cho bạn thấy lý do tại sao chúng tôi đảm bảo bạn sẽ không bao giờ phải. Chìa khóa Takeaways 
 
 
 
 
 
 Một thanh tiến độ là điều cần thiết cho một trải nghiệm người dùng tốt trong bất kỳ file uploader hiện đại. Xây dựng thanh tiến độ tùy chỉnh từ đầu đòi hỏi JavaScript boilerplate sử dụng XMLHttpRequest sự kiện upload.onprogress của nó. Cách tiếp cận thủ công buộc bạn phải tự quản lý bản cập nhật DOM và tính toán. Một thanh tiến độ chỉ frontend là vô dụng nếu không có một điểm cuối bên máy chủ để nhận tập tin, thêm phức tạp hơn. Bộ chọn Filestack tự động bao gồm một thanh tiến độ đáng tin cậy, được thiết kế chuyên nghiệp, không cần thêm mã. Hướng dẫn sử dụng Vanilla JavaScript Nếu bạn tự xây dựng tính năng này, bạn sẽ phải sử dụng trình duyệt (XHR) API. Nó cho phép bạn thực hiện các yêu cầu HTTP và, quan trọng đối với chúng tôi, theo dõi tiến trình tải lên. XMLHttpRequest Đây là cách thực hiện đó trông như thế nào, từng mảnh một. Bước 1: HTML Đầu tiên, bạn cần một đầu vào tệp cơ bản và một thùng chứa cho thanh tiến độ. <h2>Manual Progress Bar Demo</h2>
<input type="file" id="fileInput">

<div class="progress-container">
    <div class="progress-bar" id="progressBar">0%</div>
</div>
 2.CSS Tiếp theo, đây là một số phong cách đơn giản để làm cho thanh tiến độ của chúng tôi trông giống như nó thực sự đang tiến bộ. .progress-container {
    width: 100%;
    max-width: 400px;
    background-color: #dfe1e6;
    border-radius: 4px;
    height: 24px;
    margin-top: 1rem;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #0052cc;
    text-align: center;
    line-height: 24px;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    transition: width 0.3s ease;
}
 Chương 3: JavaScript Chúng ta phải chọn các yếu tố, lắng nghe một tệp, tạo một yêu cầu XHR, đính kèm một người nghe sự kiện vào Sự kiện, và cập nhật thủ công DOM. upload.onprogress const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) {
    return;
  }

  // You still need to build a server endpoint to handle this request.
  const url = 'https://your-backend-endpoint.com/upload';

  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  xhr.open('POST', url, true);

  // The key event listener for tracking progress.
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100);
      progressBar.style.width = percentComplete + '%';
      progressBar.textContent = percentComplete + '%';
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      progressBar.style.backgroundColor = '#07a85d'; // Green for success.
      progressBar.textContent = 'Complete!';
    } else {
      progressBar.style.backgroundColor = '#de350b'; // Red for failure.
      progressBar.textContent = 'Upload Failed!';
    }
  };

  formData.append('uploadedFile', file);
  xhr.send(formData);
});
 Bạn chịu trách nhiệm cho mỗi bước, và chúng tôi thậm chí không chạm vào xử lý lỗi thích hợp, thời gian, hoặc thực tế là mã này là vô dụng mà không có một backend tương ứng để nhận được tệp. Mã này cho thấy logic frontend thực tế cho một bản tải lên thủ công.Bởi vì nó đòi hỏi một máy chủ để nhận tập tin, chạy HTML này trực tiếp sẽ gây ra một lỗi trong console của trình duyệt của bạn. lỗi này là một ví dụ tuyệt vời về sự phức tạp backend ẩn mà phương pháp này đòi hỏi. Note: Chính sách Corsa Cách đơn giản với Filestack Bây giờ, chúng ta hãy xem xét các lựa chọn thay thế.Khi chúng tôi thiết kế bộ chọn Filestack, chúng tôi đã xây dựng tất cả các chức năng đó trực tiếp vào nó. Hoặc viết một progress handler. Nó được thiết kế để cung cấp cho người dùng phản hồi rõ ràng trong và sau khi tải lên. XMLHttpRequest The progress bar is built-in and works automatically. Dưới đây là mã đầy đủ để có được một bộ tải lên hình ảnh mạnh mẽ cho trang web của bạn, hoàn thành với thanh tiến độ, bằng cách sử dụng Filestack. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filestack Uploader with Automatic Progress Bar</title>
    <script src="https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        #uploadBtn {
            font-size: 16px;
            padding: 12px 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Filestack Uploader Demo</h2>
    <p>Click the button and watch the built-in progress bar.</p>
    <button id="uploadBtn">Launch Uploader</button>

    <script>
        // Replace 'YOUR_API_KEY' with your actual Filestack API key.
        // You can get one by signing up at filestack.com.
        const apikey = 'YOUR_API_KEY';
        const client = filestack.init(apikey);

        const options = {
            // This function will be called once the upload is complete.
            onUploadDone: (res) => console.log(res),
            // You can add more options here to customize the picker,
            // such as file types, max size, cloud sources, etc.
            // For example:
            // accept: ['image/*', 'video/*'],
            // maxFiles: 5,
            // transformations: {
            //   crop: true,
            //   rotate: true,
            // },
        };

        // Attach an event listener to the button to open the Filestack picker.
        document.getElementById('uploadBtn').addEventListener('click', () => {
            client.picker(options).open();
        });
    </script>

</body>
</html>
 Đó là toàn bộ việc thực hiện. bạn nhận được một bộ tải lên đẹp, đầy đủ tính năng cho thấy sự tiến bộ chi tiết cho mỗi tệp, và bạn đã viết khoảng năm dòng mã có ý nghĩa để có được nó. Wrapping lên Cách tiếp cận JavaScript thủ công thực hiện công việc, nhưng nó là một minh họa hoàn hảo của một thời gian tắt của nhà phát triển. Bạn buộc phải viết mã boilerplate để quản lý các sự kiện XHR và thao túng DOM, và đó chỉ là cho frontend. Khi chúng tôi xây dựng bộ chọn Filestack, chúng tôi đã xem xét thanh tiến độ là bảng đặt cược, không phải là một tính năng tùy chọn mà bạn nên tự triển khai. Nó là một yêu cầu cơ bản cho trải nghiệm người dùng tốt. đó là lý do tại sao nó được bao gồm theo mặc định, cùng với xử lý lỗi mạnh mẽ, tải lên nhiều phần cho các tệp lớn và logic retry. Thời gian của bạn là tài nguyên quý giá nhất của bạn. Dành nó để tái triển khai các vấn đề đã giải quyết là một trò chơi thua cuộc. Mục tiêu là tập trung vào logic cốt lõi của ứng dụng của bạn, chứ không phải việc quản lý. This article was originally published on the  . Filestack blog Blog của Filestack

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Make resilience your competitive advantage

Một cách đơn giản để xây dựng thanh tiến độ cho trình tải lên hình ảnh trang web của bạn bằng cách sử dụng FileStack

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

581 Stories To Learn About Non Fiction

178 Stories To Learn About Essay

240 Stories To Learn About Astounding Stories

85 Stories To Learn About Travel

581 Stories To Learn About Non Fiction

178 Stories To Learn About Essay

240 Stories To Learn About Astounding Stories

85 Stories To Learn About Travel

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps