web页面按顺序上传文件，并显示上传进度条

1. 创建文件输入和上传按钮：

<div id="messages" class="clearfix" />
<input type="file" id="file-input" multiple>
<button id="upload-button">上传文件</button>

 

2. 编写 JavaScript 代码

$(document).ready(function() {
    var filesToUpload = []; // 用于存储文件队列
    var currentFileIndex = 0; // 当前上传文件的索引

    // 监听文件输入框的变化
    $('#file-input').on('change', function(e) {
        var files = e.target.files;
        for (var i = 0; i < files.length; i++) {
            filesToUpload.push(files[i]); // 将文件添加到队列
        }
        // 开始上传第一个文件
        uploadNextFile();
    });

    // 上传按钮事件
    $('#upload-button').on('click', function() {
        if (filesToUpload.length > 0) {
            uploadNextFile(); // 开始上传队列中的第一个文件
        }
    });

    // 上传文件的函数
    function uploadNextFile() {
        if (currentFileIndex < filesToUpload.length) {
            var file = filesToUpload[currentFileIndex];
            var formData = new FormData();
            formData.append('file', file); // 'file' 是后端接收文件的字段名
            
            //添加上传进度条
            showProgress(file.name, currentFileIndex)
            
            //找到当前进度条的元素
            var currentProgressSelector = `[lay-filter='progress${currentFileIndex}']`;
            var progressBar = document.querySelector(currentProgressSelector);
            
            //定时更新进度条, 模拟上传进度, 当前定义每秒进度+10
            var timer = setInterval(function() {
                var currentProgress = progressBar.firstChild.style.width
                //进度条已经在请求结果中改为100%时, 删除定时器
                if (currentProgress == '100%') {
                    clearInterval(timers[`timer_${currentFileIndex}`]);
                } else {
                    n = n + 10;
                    if (n > 95) {
                        n = 95;
                        clearInterval(timers[`timer_${currentFileIndex}`]);
                    }
                    element.progress('progress' + currentFileIndex, n + '%');
                }
            },1000)
            
            $.ajax({
                url: 'upload', // 后台处理文件的接口
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    //上传成功时,将进度条置为100%
                    element.progress("progress" + currentFileIndex, "100%");
                    element.render('progress');
                    console.log('文件上传成功：', response);
                    currentFileIndex++; // 移动到下一个文件
                    uploadNextFile(); // 继续上传下一个文件
                },
                error: function() {
                    console.log('文件上传失败');
                    currentFileIndex++; // 即使失败也移动到下一个文件
                    uploadNextFile(); // 继续上传下一个文件
                }
            });
        } else {
            console.log('所有文件已上传完毕');
            // 可以在这里执行上传完毕后的操作，比如通知用户
        }
    }
    
    //显示进度条
    function showProgress(fileName, i) {
        var msg = "<div class='progressbar'><div class='progressname'>" + fileName + "</div><div class='layui-progress layui-progress-big'  lay-filter='progress" + i + "'  lay-showpercent='true'><div class='layui-progress-bar' lay-percent='100%'></div></div></div>";
        $("#messages").append(msg);
    }
});