Jika anda membina apa-apa jenis muat naik imej untuk laman web, anda akan dengan cepat menyedari bahawa input fail asas tidak mencukupi.Momentum pengguna cuba memuat naik fail besar, pengalaman pecah.Mereka mengklik "Upload," pelayar seolah-olah menggantung, dan mereka tidak mempunyai idea sama ada ia berfungsi atau rosak.Ini adalah saat yang tepat anda menyedari bahawa anda memerlukan bar kemajuan. Perkara adalah, membina satu daripada awal adalah perangkap pengembang klasik.Ia kelihatan mudah, tetapi anda segera mendapati diri anda dalam kerosakan objek, pendengar acara, dan manipulasi DOM.Ia adalah satu ton boilerplate untuk ciri yang hanya perlu standard. XMLHttpRequest Mari kita berjalan melalui bagaimana untuk membina satu secara manual, dan kemudian saya akan menunjukkan kepada anda mengapa kami memastikan anda tidak perlu. Utama Takeaways 
 
 
 
 
 
 Bar kemajuan adalah penting untuk pengalaman pengguna yang baik dalam mana-mana uploader fail moden. Membina bar kemajuan tersuai dari awal memerlukan JavaScript boilerplate menggunakan XMLHttpRequest peristiwa upload.onprogress. Pendekatan manual memaksa anda untuk menguruskan kemas kini dan pengiraan DOM sendiri. Bar kemajuan frontend sahaja tidak berguna tanpa titik akhir sisi pelayan untuk menerima fail, menambah lebih kompleksiti. Filestack picker secara automatik termasuk bar kemajuan yang boleh dipercayai dan direka secara profesional, tanpa keperluan kod tambahan. Kaedah manual dengan Vanilla JavaScript Jika anda hendak membina ciri-ciri ini sendiri, anda perlu menggunakan pelayar (XHR) API. Ia membolehkan anda membuat permintaan HTTP dan, yang penting bagi kami, memantau kemajuan muat naik. XMLHttpRequest Berikut ialah bagaimana pelaksanaan itu kelihatan, sepotong demi sepotong. 1 Pengertian HTML Pertama, anda memerlukan input fail asas dan wadah untuk bar kemajuan. <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. dan CSS Seterusnya, di sini adalah beberapa gaya mudah untuk membuat bar kemajuan kami kelihatan seperti ia benar-benar berkembang. .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;
}
 Perkhidmatan JavaScript Kami perlu memilih elemen, mendengarkan fail, mencipta permintaan XHR, melampirkan pendengar acara ke peristiwa, dan mengemas kini DOM secara manual. 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);
});
 Ini berfungsi, tetapi lihat upacara. anda bertanggungjawab untuk setiap langkah, dan kami bahkan tidak menyentuh pengurusan kesilapan yang betul, timeout, atau hakikat bahawa kod ini tidak berguna tanpa backend yang sesuai untuk menerima fail. Kod ini menunjukkan logik frontend sebenar untuk muat naik manual.Karena ia memerlukan pelayan untuk menerima fail, menjalankan HTML ini secara langsung akan menyebabkan kesilapan dalam konsol pelayar anda. kesilapan ini merupakan contoh yang baik daripada kerumitan backend tersembunyi yang diperlukan pendekatan ini. Note: Kursus Kebijakan Cara Mudah Dengan Filestack Sekarang, mari kita lihat alternatif.Ketika kami merancang pemilih Filestack, kami membina semua fungsi itu secara langsung ke dalamnya. atau menulis sebuah progress handler. Ia direka untuk memberikan maklum balas yang jelas kepada pengguna semasa dan selepas muat naik. XMLHttpRequest The progress bar is built-in and works automatically. Berikut ialah kod lengkap untuk mendapatkan muat naik imej yang berkuasa untuk laman web anda, lengkap dengan bar kemajuan, menggunakan 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>
 Itulah keseluruhan pelaksanaan. anda mendapat yang indah, penuh ciri uploader yang menunjukkan kemajuan terperinci untuk setiap fail, dan anda telah menulis kira-kira lima baris kod yang bermakna untuk mendapatkannya. Membungkus Pendekatan JavaScript manual mendapat kerja selesai, tetapi ia merupakan ilustrasi yang sempurna daripada sink masa pengembang. anda terpaksa menulis kod boilerplate untuk menguruskan peristiwa XHR dan memanipulasi DOM, dan itu hanya untuk frontend. anda masih perlu membina dan mengekalkan titik akhir sisi pelayan untuk benar-benar menerima fail. Apabila kami membina pemilih Filestack, kami mempertimbangkan bar kemajuan untuk menjadi pertukaran jadual, bukan ciri opsional yang anda perlu melaksanakan sendiri.Ia adalah keperluan asas untuk pengalaman pengguna yang baik.Ia adalah sebabnya ia disertakan secara lalai, bersama-sama dengan pengurusan ralat yang kukuh, muat naik pelbagai bahagian untuk fail besar, dan logik retry. Masa anda adalah sumber yang paling berharga. Menghabiskan ia untuk mengimplementasikan semula masalah yang diselesaikan adalah permainan yang kalah. Matlamat adalah untuk memberi tumpuan kepada logik teras aplikasi anda, bukan penyiraman. This article was originally published on the  . Filestack blog Filsafat Blog

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Audio ini dihasilkan dalam bahasa asal cerita!

Terlalu panjang; Untuk membaca

Make resilience your competitive advantage

Cara mudah untuk membina bar kemajuan untuk muat naik imej laman web anda menggunakan Filestack

About Author

KOMEN

GANTUNG TANDA

ARTIKEL INI DIBENTANGKAN DALAM

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps