方案 ：Bootstrap + Plupload（支持分片上传）
📌 主要特点
支持分片上传，适用于大文件
支持自定义进度条
兼容 Bootstrap
📌 代码示例
<!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的全部内容，更多相关一个支持分片上传大文件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复