jquery-confirm 上传进度条
![jquery-confirm](
引言
在现代Web应用中，文件上传是一项常见的功能。为了提供更好的用户体验，上传过程中显示进度条是非常有用的。jquery-confirm是一个流行的jQuery插件，它提供了一个简单的方式来创建漂亮的弹出窗口，其中包含了进度条。本文将介绍如何使用jquery-confirm插件来实现上传进度条的功能。
安装jquery-confirm
首先，我们需要在我们的项目中安装jquery-confirm。你可以选择直接下载jquery-confirm的压缩文件，或者使用npm包管理器安装jquery-confirm。
```bash
npm install jquery-confirm
安装完成后，我们需要引入jquery-confirm的CSS和JS文件。
```html
<link rel="stylesheet" href="path/to/jquery-confirm.min.css">
<script src="path/to/jquery-confirm.min.js"></script>
文件上传进度条
使用jquery-confirm插件实现文件上传进度条的过程非常简单。我们只需要在上传文件的JavaScript代码中添加一些额外的代码即可。
```javascript
$("#uploadButton").click(function() {
// 显示进度条对话框
$.confirm({
title: '上传文件',
content: '<div class="progress"><div class="progress-bar"></div></div>',
buttons: {
cancel: function() {
// 取消上传
}
},
onOpen: function() {
// 上传文件
var file = document.getElementById("fileInput").files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$(".progress-bar").text(percent + "%");
$(".progress-bar").css("width", percent + "%");
}
}, false);
xhr.addEventListener("load", function() {
// 文件上传完成
}, false);
xhr.send(formData);
},
onClose: function() {
// 关闭进度条对话框
}
});
});
代码解析：
- 我们首先通过
$.confirm()函数创建一个弹出窗口，其中包含了进度条。title参数设置对话框的标题，content参数设置对话框的内容，buttons参数设置对话框的按钮。 - 在
onOpen回调函数中，我们获取用户选择的文件，并使用FormData对象将文件数据添加到表单数据中。 - 然后，我们创建一个XMLHttpRequest对象，并使用
open()方法指定请求的方法和URL。 - 接下来，我们使用
upload事件来监听文件上传的进度。在事件处理函数中，我们计算已上传的字节数和总字节数的百分比，并更新进度条的样式。 - 最后，我们使用
send()方法发送请求，并在load事件中处理文件上传完成的逻辑。
完整示例
下面是一个完整的示例，展示了如何使用jquery-confirm插件实现文件上传进度条的功能。
```html
<!DOCTYPE html>
<html>
<head>
<title>文件上传进度条</title>
<link rel="stylesheet" href="path/to/jquery-confirm.min.css">
<script src="path/to/jquery-confirm.min.js"></script>
<style>
.progress {
width: 200px;
height: 20px;
background-color: #f0f0f0;
border-radius: 3px;
overflow: hidden;
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #00a8ff;
transition: width 0.5s;
}
</style>
</head>
<body>
<input type="file" id="fileInput">
<button id="uploadButton">上传</button>
<script>
$("#uploadButton").click(function() {
// 显示进度条对话框
$.confirm({
title: '上传文件',
content: '<div class="progress"><div class="progress-bar"></div></div>',
buttons: {
cancel: function() {
// 取消上传
}
},
onOpen: function() {
// 上传文件
var file = document.getElementById("fileInput").files[0];
var formData = new FormData();
