نمایش درصد آپلود فایل

در توسعه نرم افزار یکی از ارکان اصلی به وجود آوردن تجربه کاربری بهتر برای کاربران است که نمایش درصد آپلود فایل می تواند در این مورد کمک زیادی به بهبود تجربه کاربری کند.

در اینجا قصد داریم به سادگی مقدار درصد آپلود فایل را نمایش دهیم.

بخش HTML

ابتدا یک فرم ساده برای انتخاب فایل و نمایش درصد آپلود ایجاد می کنیم.

<input type="file" id="fileInput" />
<button id="uploadButton">Upload</button>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentText">0%</span>

بخش JavaScript

سپس با استفاده از XMLHttpRequest فایل را به سرور ارسال می کنیم و درصد آپلود را نمایش می دهیم.

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (file) {
        const xhr = new XMLHttpRequest();
        const progressBar = document.getElementById('progressBar');
        const percentText = document.getElementById('percentText');

        xhr.open('POST', '/upload', true); // Enter your server address

        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBar.value = percentComplete;
                percentText.textContent = Math.round(percentComplete) + '%';
            }
        });

        xhr.onload = function() {
            if (xhr.status === 200) {
                alert('Upload successful!');
            } else {
                alert('Upload failed!');
            }
        };

        const formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    } else {
        alert('Please select a file!');
    }
});