使用 div 上传图片需要 ajax 技术，步骤如下：创建包含 div 上传目标区域的 html 表单。添加文件输入字段以选择图片。创建 ajax 请求发送文件数据到 php 服务器端。在 php 服务器端处理上传文件并将其保存。使用 javascript 或 css 显示上传进度。
PHP 使用 div 上传图片
使用 div 上传图片是通过 Ajax 上传技术实现的，该技术允许在不刷新整个页面的情况下上传文件。
步骤：
-
创建 HTML 表单：
立即学习“PHP免费学习笔记（深入）”；
- 包含一个 div 元素，作为上传目标区域。
- 添加文件输入字段，用于选择图片文件。
- 添加一个按钮或链接，以触发上传过程。
<code class="html"><form id="uploadForm"> <div id="dropzone">拖放图片到这里</div> <input type="file" name="image" id="imageFile" multiple> <button type="submit">上传</button> </form></code>
-
设置 Ajax 处理程序：
- 使用 JavaScript 创建一个 Ajax 请求，将文件数据发送到 PHP 服务器端。
- 在 PHP 服务器端，处理上传的文件并将其保存到指定目录。
<code class="javascript">// 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) {
// 处理服务器响应
}
});
});</code><code class="php">// 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);
}
}</code>-
显示上传进度：
- 使用 JavaScript 或 CSS 来显示上传进度，例如进度条或百分比。
<code class="javascript">// 显示上传进度
function updateProgress(percent) {
$("#progress").css("width", percent + "%");
}</code><code class="css">#progress {
width: 0;
height: 20px;
background-color: green;
}</code> 
