使用 div 上传图片需要 ajax 技术,步骤如下:创建包含 div 上传目标区域的 html 表单。添加文件输入字段以选择图片。创建 ajax 请求发送文件数据到 php 服务器端。在 php 服务器端处理上传文件并将其保存。使用 javascript 或 css 显示上传进度。
PHP 使用 div 上传图片
使用 div 上传图片是通过 Ajax 上传技术实现的,该技术允许在不刷新整个页面的情况下上传文件。
步骤:
-
创建 HTML 表单:
立即学习“PHP免费学习笔记(深入)”;
- 包含一个 div 元素,作为上传目标区域。
- 添加文件输入字段,用于选择图片文件。
- 添加一个按钮或链接,以触发上传过程。
-
设置 Ajax 处理程序:
- 使用 JavaScript 创建一个 Ajax 请求,将文件数据发送到 PHP 服务器端。
- 在 PHP 服务器端,处理上传的文件并将其保存到指定目录。
// Ajax 上传处理程序
$('#uploadForm').submit(function(e) {
e.preventDefault();
// 获取文件数据
var formData = new FormData($(this)[0]);
// 发送 Ajax 请求
$.ajax({
url: 'upload.php',
method: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(data) {
// 处理服务器响应
}
});
});
// PHP 服务器端处理程序
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 处理上传的文件并将其保存
$file = $_FILES['image'];
// 检查文件错误
if ($file['error'] === UPLOAD_ERR_OK) {
// 获取文件扩展名
$ext = pathinfo($file['name'], PATHINFO_EXTENSION);
// 生成唯一文件名
$filename = uniqid() . '.' . $ext;
// 移动文件到目标目录
move_uploaded_file($file['tmp_name'], 'uploads/' . $filename);
}
}
-
显示上传进度:
- 使用 JavaScript 或 CSS 来显示上传进度,例如进度条或百分比。
// 显示上传进度
function updateProgress(percent) {
$("#progress").css("width", percent + "%");
}
#progress {
width: 0;
height: 20px;
background-color: green;
}