实现同时上传多张图片的多个百分比进度条的js组件FilePond

387 阅读 0 评论 256 点赞

我是靠谱客的博主每日一库，这篇文章主要介绍实现同时上传多张图片的多个百分比进度条的js组件FilePond，现在分享给大家，希望可以做个参考。

推荐方案：Bootstrap + FilePond（最简单，UI 友好）

📌 主要特点

支持多图片上传
支持 Ajax 实时上传
自动显示进度条
兼容 Bootstrap

📌 代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多文件上传进度条</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.css">
    <script src="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.js"></script>
</head>
<body class="container mt-4">

    <h2>多文件上传</h2>
    <input type="file" class="filepond" multiple data-max-files="5">

    <script>
        // 初始化 FilePond
        FilePond.create(document.querySelector('.filepond'), {
            allowMultiple: true,
            server: {
                process: '/upload', // 你的服务器上传接口
                ondata: (formData) => formData,
                onprogress: (progress) => console.log('上传进度:', progress),
            }
        });
    </script>

</body>
</html>