在使用
jQuery 实现
文件上传并显示
上传进度条的功能时，需要通过 `FormData` 对象封装
文件数据，并利用 `XMLHttpRequest` 的 `upload.addEventListener('progress', ...)` 方法来监听
上传进度[^1]。通过监听 `progress` 事件，可以获取当前
上传的字节数 (`e.loaded`) 和总字节数 (`e.total`)，从而计算出
上传百分比，并动态更新
进度条的宽度。
### 前端实现代码
以下是一个完整的 HTML 示例，包含
文件上传表单、
进度条展示和
jQuery 的 AJAX
文件上传逻辑：
```html
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="img" name="file" />
<button type="button" onclick="doUpload()">
上传</button>
</form>
<div class="progress" style="width: 100%; background-color: #f3f3f3;">
<div style="width: 0%; height: 30px; background-color: #4caf50;"></div>
</div>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
<script>
function doUpload() {
var formData = new FormData($("#uploadForm")[0]);
var fileExtension = $("#img").val().substring($("#img").val().lastIndexOf("."));
var allowedExtensions = [".jpg", ".jpeg", ".JPG", ".JPEG", ".png", ".PNG"];
if (!allowedExtensions.includes(fileExtension)) {
alert("
上传图片格式必须为 jpg、jpeg 或者 png");
return false;
}
$.ajax({
url: "/upAjax",
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var progressRate = (e.loaded / e.total) * 100 + '%';
$('.progress > div').css('width', progressRate);
}
});
return xhr;
},
success: function(result) {
if (result === "" || result === null) {
alert("请至少选择一个
文件");
} else {
console.log("
上传成功");
}
},
error: function(data) {
alert("
上传失败");
}
});
}
</script>
```
### 后端 PHP 接收
文件并处理
PHP 接收
上传的
文件可以通过 `$_FILES` 获取
上传信息，并使用 `move_uploaded_file()` 将
文件从临时路径移动到目标目录。以下是一个基础的 PHP
文件接收示例：
```php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['file'])) {
$file = $_FILES['file'];
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
$targetFile = $uploadDir . basename($file["name"]);
if (move_uploaded_file($file["tmp_name"], $targetFile)) {
echo "
文件上传成功：" . $file["name"];
} else {
echo "
文件上传失败";
}
} else {
echo "未接收到
文件";
}
}
?>
```
### 注意事项
- `FormData` 是用于封装
文件上传数据的关键对象，必须配合 `contentType: false` 和 `processData: false` 使用，以确保
jQuery 不对 `FormData` 进行额外处理[^1]。
- `xhr.upload.addEventListener('progress', ...)` 是实现
上传进度条的核心方法，通过监听
上传过程中的 `progress` 事件，可以动态更新
进度条的样式。
- 在前端限制
文件类型是一种辅助性措施，后端仍需进行
文件格式验证以确保安全性。
- 确保服务器的 `php.ini` 配置中 `upload_max_filesize` 和 `post_max_size` 设置合理，以支持大
文件上传。
---
扫一扫
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
