Əgər bir sayt üçün hər hansı bir görüntü yükleyicisi qurursanız, basılı bir fayl girişinin kifayət etmədiyini çox çətindir.Bir istifadəçi böyük bir faylı yükləməyə çalışdığında, deneyim çökür. Onlar “Upload”i tıklatırlar, brauzer asılı görünür və onun işlədiyini və ya çalınmadığını bilmirlər. Bu, progres barına ehtiyacınız olduğunu bildiyiniz tam vaxtdır. “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”da “Bakı”ndadır. Əməliyyatlar, hadisələr dinləyicilər və DOM manipülasiyası.Bu, standart olmalıdır bir xüsusiyyət üçün bir ton boilerplatedir. XMLHttpRequest Elə birini manuel olaraq qurmaq üçün necə çalışacağıq, sonra sizə niyə heç vaxt etməyəcəyinizdən xəbər verəcəyik. Baş məşqçi 
 
 
 
 
 
 Progress barı hər bir modern fail yüklü cihazda yaxşı bir istifadəçi deneyimi üçün vacibdir. Xatırladaq ki, bu problemin başlanğıcını XMLHttpRequest-in upload.onprogress hadisəsi ilə təmin etmək lazımdır. Manualdır ki, sistemin yenilikləri və hesabatları özünüzə verin. Front-only progress bar server-side endpoint olmadan faydalıdır və daha çox kompleksliyi artırır. "Filestack" seçicisi otomatik olaraq güvenli, profesyonel olaraq dizayn edilmiş progres barı daxil edir, heç bir ekstra kodu lazımdır. Vanilla JavaScript ilə işləmək Əgər bu funksiyaları özünüz yaratırsınızsa, browser-in (XHR) API. Bu, HTTP istəkləri etmək və bizim üçün kritik olaraq, bir yükləmənin davamını izləməyə imkan verir. XMLHttpRequest Bu, belə görünür, bir parçadan bir parçaya. 1. HTML proqramı Birincisi, prosesi bar üçün bazal bir fail girişinə və bir konteynerə ehtiyacınız var. <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 Bundan sonra, burada bizim progressiya çubuğumuzu həqiqətən progressiya kimi görmək üçün bir neçə basit stillər var. .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;
}
 • JavaScript haqqında Biz elementləri seçmək, bir fail dinləmək, bir XHR istefa yaratmaq, bir olay dinləmə aparıcı bağlamaq lazımdır. Əsas səhifə Güncellenməli ev. 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);
});
 Bu işləyir, ancaq seremoniyaya baxın.Siz hər adımdan sorğu-sual edirsiniz, və biz düzgün hata işləmək, vaxt keçirmək və ya bu kodu dosyayı qəbul etmək üçün qarşılıqlı backend olmadan işləmək üçün faydalı olmadığı gerçəkləşməmişik.Bu tam olaraq bizə inanırıq ki, siz bunu etməyəcəksiniz. Bu kod manual yükləmək üçün real frontend logikasını göstərir. dosyayı qəbul etmək üçün bir serverə ehtiyacı olduğu üçün, bu HTML-i doğrudan çalışdırmaq bir problemə səbəb ola bilər. VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu. Note: Siyasi kurslar Filed under Filed Under Filed Under Filed Under Filed Under Filed Under Filed Under Filed Under Filed Under Biz Filestack pickerini dizayn etdikdə bütün bu funksiyaları doğrudan onun içinə qurduq. Və ya Progress Manager yazın. Bu, istifadəçilərə yükləmək sırasında və sonra açıq feedback vermək üçün tasarlanmışdır. XMLHttpRequest The progress bar is built-in and works automatically. Burada, Filestack istifadə edərək, web siteniz üçün güclü bir görüntü yükleyicisi almaq üçün tam kodu var. <!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>
 Siz hər bir fail üçün ayrıntılı nəticəni göstərən gözəl, tam funksiyalı yüklü alırsınız və bunu əldə etmək üçün beş dildə anlamlı kod yazdınız. Yuxarı qaçmaq VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu. Filestack pickerini yaratdığımız zaman, progresiya çubuğu tabellar olaraq düşünürdük, özünüzə yükləmək lazımdır ki, seçici bir xüsusiyyət deyil. Bu, yaxşı istifadəçi deneyimi üçün temel bir ehtiyacdır.Bu, sağlam hataların işləməsi, böyük faillar üçün çox paylaşılan yükləmələr və retry logikası ilə bağlıdır. Sizin vaxtınız ən qiymətli resursunuzdur. Çözüldüyü problemləri yeniləmək üçün xərcləmək yeniləmə oyundur. Həyatınızın əsas logikasına, suyun təmirinə deyil, fokuslaşdırılmasıdır. This article was originally published on the  . Filestack blog Filtrasiya Blog

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Bu audio hekayənin orijinal dilində hazırlanmışdır!

Çox uzun; Oxumaq

Make resilience your competitive advantage

Web saytınızın görüntüləri yükləmək üçün Progress barı yaratmaq üçün basit bir yol

About Author

ŞƏRHLƏR

ETİKET ASIN

BU MƏQALƏ TƏQDİM EDİLMİŞDİR

Related Stories

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

How Azarus's Technology is Transforming Viewer Engagement on Stream

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

Women in Tech: Azize Sultan Shares Her Inspiring Journey from Architecture to Tech Leadership

How Azarus's Technology is Transforming Viewer Engagement on Stream

Optimizing Operations for Real Estate Investors - Interview with Startups of the Year Nominee, Azibo

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps