淘先锋技术网

首页 1 2 3 4 5 6 7

php ajax上传图片预览返回路径

在Web开发中，上传图片并预览是一个常见的需求。使用PHP和AJAX可以轻松实现这个功能，实现图片的即时预览和返回路径。具体实现步骤如下：

首先，我们需要一个包含文件上传表单和图片预览功能的HTML页面。在页面中，我们可以添加一个文件选择框和一个预览框，用于显示用户选择的图片。代码如下：

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" onchange="previewImage()">
<img src="" alt="Preview Image" id="preview">
<input type="submit" value="Upload">
</form>

接下来，我们编写一个PHP文件（upload.php）来处理文件上传和返回图片路径的功能。PHP代码如下：

<?php
$target_dir = "uploads/"; // 设置上传目录
$target_file = $target_dir . basename($_FILES["image"]["name"]); // 获取上传文件的路径
$uploadOk = 1;
// 检查文件是否为图片格式
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["image"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// 检查文件是否已存在
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// 检查文件大小
if ($_FILES["image"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// 允许特定的文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// 检查上传是否成功
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// 如果所有条件都通过，则将文件从临时位置移动到目标位置，并返回文件路径
} else {
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["image"]["name"]). " has been uploaded.";
echo "File Path: " . $target_file;
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>

上述代码首先对上传的文件进行各种验证和检查，包括文件类型、文件大小、文件是否已存在等。如果文件通过了所有的检查条件，则将文件从临时位置移动到目标位置，并返回文件路径。

最后，我们需要编写一个JavaScript函数来实现图片的即时预览。代码如下：

function previewImage() {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("preview").src = e.target.result;
};
reader.readAsDataURL(document.getElementById("image").files[0]);
}

上述代码中，我们创建了一个FileReader对象，通过读取用户选择的图片文件并转换成可显示的URL。将转换后的URL赋值给预览框的src属性，即可实现图片的即时预览。

综上所述，通过PHP和AJAX实现图片上传和预览功能并返回图片路径非常简单。我们只需要在HTML页面中添加文件上传表单和预览框，并在PHP文件中对文件进行验证和移动操作，同时在JavaScript中实现图片的即时预览即可。这样，用户在选择图片后，不仅可以即时预览图片，还可以获取到上传图片的路径，方便后续处理。

参考文献：

  1. PHP File Upload: https://www.php.net/manual/en/features.file-upload.php
  2. FileReader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader