HTML表单如何添加进度条？progress标签怎么用？

<progress>

<progress>

value

max

max

value

max

value

<progress>

value

<progress>

<label for="uploadProgress">文件上传进度:</label>
<progress id="uploadProgress" value="0" max="100"></progress>
<span id="progressText">0%</span>

<!-- 这是一个假想的表单，进度条通常在表单操作时更新 -->
<form id="myForm" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="myFile" id="myFile">
    <button type="submit">上传文件</button>
</form>

<script>
    // 假设这是在文件上传过程中更新进度的逻辑
    // 实际中会监听XMLHttpRequest或Fetch API的progress事件
    const progressBar = document.getElementById('uploadProgress');
    const progressText = document.getElementById('progressText');
    let currentProgress = 0;

    // 模拟进度更新
    const interval = setInterval(() => {
        if (currentProgress < 100) {
            currentProgress += 5;
            progressBar.value = currentProgress;
            progressText.textContent = `${currentProgress}%`;
        } else {
            clearInterval(interval);
            progressText.textContent = '上传完成！';
        }
    }, 200);
</script>

currentProgress

XMLHttpRequest

progress

value

max

<progress>

max

value

value

max

max="100"

value="50"

value="0"

value

max

value

max

<progress>

<!-- 确定性进度条：显示具体进度 -->
<label for="definiteProgress">文件解压进度:</label>
<progress id="definiteProgress" value="75" max="100"></progress>
<br>

<!-- 不确定性进度条：任务进行中，但具体进度未知 -->
<label for="indeterminateProgress">数据加载中:</label>
<progress id="indeterminateProgress"></progress>

value

max

value

max

progress

XMLHttpRequest

Fetch

FormData

XMLHttpRequest.upload

progress

event

loaded

total

<progress>

value

max

document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交

    const fileInput = document.getElementById('myFile');
    const progressBar = document.getElementById('uploadProgress');
    const progressText = document.getElementById('progressText');

    if (!fileInput.files.length) {
        alert('请选择一个文件！');
        return;
    }

    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('myFile', file);

    const xhr = new XMLHttpRequest();

    // 监听上传进度事件
    xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) { // 确保总长度是可计算的
            const percentComplete = (event.loaded / event.total) * 100;
            progressBar.value = event.loaded; // 或者直接用百分比
            progressBar.max = event.total;   // 或者 max 设为 100
            progressText.textContent = `${Math.round(percentComplete)}%`;
            console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
        }
    });

    // 监听上传完成事件
    xhr.addEventListener('load', function() {
        if (xhr.status === 200) {
            progressText.textContent = '上传成功！';
            console.log('文件上传成功:', xhr.responseText);
        } else {
            progressText.textContent = '上传失败！';
            console.error('文件上传失败:', xhr.status, xhr.statusText);
        }
    });

    // 监听错误事件
    xhr.addEventListener('error', function() {
        progressText.textContent = '网络错误或上传失败！';
        console.error('上传过程中发生网络错误。');
    });

    xhr.open('POST', '/upload', true); // 替换为你的上传接口
    xhr.send(formData);

    // 上传开始时，将进度条设为0，并显示不确定状态（如果需要）
    progressBar.value = 0;
    progressBar.max = 1; // 临时设为1，表示不确定状态，或者直接不设max
    progressText.textContent = '0%';
});

xhr.upload.progress

<progress>

value

max

value

max

<progress>

<progress>

<progress>

<progress>

div

<!-- 传统降级方案，适用于不支持<progress>的浏览器 -->
<div class="custom-progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-fill" style="width: 75%;"></div>
</div>

<style>
.custom-progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.custom-progress-bar .progress-fill {
    height: 100%;
    background-color: #4CAF50;
    border-radius: 10px;
    transition: width 0.3s ease-in-out;
}
</style>

<progress>

'value' in document.createElement('progress')

div

<progress>