如何在重力表单中设置文件上传进度条？

<!-- 表单HTML结构 -->
<form id="gravityForm" enctype="multipart/form-data">
    <input type="file" name="fileupload" />
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <button type="submit">上传</button>
</form>

<script>
document.getElementById('gravityForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var formData = new FormData(this);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'your-upload-endpoint', true);

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            document.querySelector('.progress-bar').style.width = percentComplete + '%';
            document.querySelector('.progress-bar').setAttribute('aria-valuenow', percentComplete);
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('上传成功');
        } else {
            alert('上传失败');
        }
    };

    xhr.send(formData);
});
</script>

<style>
.progress {
    width: 100%;
    height: 20px;
    background-color: #ddd;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 20px;
}
</style>