方案 ：Bootstrap + Plupload（支持分片上传）
📌 主要特点
支持分片上传，适用于大文件
支持自定义进度条
兼容 Bootstrap
📌 代码示例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Plupload 多文件上传</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/plupload/js/plupload.full.min.js"></script> </head> <body class="container mt-4"> <h2>Plupload 多文件上传</h2> <button id="pickfiles" class="btn btn-primary">选择文件</button> <div id="upload-list"></div> <script> var uploader = new plupload.Uploader({ browse_button: 'pickfiles', // 选择文件按钮 url: '/upload', // 服务器上传接口 multi_selection: true, init: { FilesAdded: function(up, files) { files.forEach(file => { let progressBar = document.createElement('div'); progressBar.innerHTML = `<div class="progress mt-2"> <div class="progress-bar" id="progress-${file.id}" style="width: 0%;">0%</div> </div>`; document.getElementById('upload-list').appendChild(progressBar); }); up.start(); }, UploadProgress: function(up, file) { let progressBar = document.getElementById(`progress-${file.id}`); progressBar.style.width = file.percent + '%'; progressBar.textContent = file.percent + '%'; } } }); uploader.init(); </script> </body> </html>
🔹 优点
✅ 支持分片上传，适合大文件
✅ 进度条完全可自定义
✅ 支持 Bootstrap 进度条
最后
以上就是每日一库最近收集整理的关于一个支持芬片上传大文件的js组件Plupload的全部内容，更多相关一个支持芬片上传大文件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复