一、准备工作
二、创建上传表单
<form action="upload.php" method="post" enctype="multipart/form-data">
选择图片：<input type="file" name="image" />
<input type="submit" value="上传" />
</form>
三、编写PHP上传处理脚本
<?php
// upload.php
if (isset($_FILES['image'])) {
$image = $_FILES['image'];
$upload_dir = 'uploads/';
$file_name = basename($image['name']);
$file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
$new_file_name = uniqid() . '.' . $file_ext;
$upload_path = $upload_dir . $new_file_name;
if (move_uploaded_file($image['tmp_name'], $upload_path)) {
echo "文件上传成功！路径：{$upload_path}";
} else {
echo "文件上传失败！";
}
}
?>
四、使用iframe进行异步上传
为了实现不刷新页面的上传效果，我们可以使用iframe来异步提交表单。以下是HTML代码，其中包含iframe元素：
<iframe id="upload_iframe" name="upload_iframe" style="display:none;"></iframe>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_iframe">
选择图片：<input type="file" name="image" />
<input type="submit" value="上传" />
</form>
在上面的代码中，表单的target属性被设置为upload_iframe，这意味着表单数据将被发送到iframe的name指定的目标。
五、处理iframe上传结果
<?php
// upload.php
if (isset($_FILES['image'])) {
// ... 省略之前的代码 ...
if (move_uploaded_file($image['tmp_name'], $upload_path)) {
echo "<script>parent.uploadSuccess('{$upload_path}');</script>";
} else {
echo "<script>parent.uploadFailed('文件上传失败！');</script>";
}
}
?>
在HTML中，我们定义了两个JavaScript函数uploadSuccess和uploadFailed，用于处理上传成功和失败的情况。
<script>
function uploadSuccess(path) {
// 图片上传成功后的处理逻辑
alert('图片上传成功！');
// 在这里可以添加代码将图片路径显示在页面上
}
function uploadFailed(message) {
// 图片上传失败后的处理逻辑
alert(message);
}
</script>