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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！