当前位置：首页 > 行业动态 > 正文

ajax上传图片到PHP并压缩图片显示的方法

admin
行业动态
2025-03-19
3

“`javascript，使用FormData对象和XMLHttpRequest或fetch API上传图片，PHP端用GD库压缩并返回处理后的图片。

使用Ajax上传图片到PHP并压缩图片显示的方法

一、前端部分

1. HTML表单

创建一个包含文件上传的input标签，并设置enctype属性为multipart/form-data，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax上传图片并压缩显示</title>
</head>
<body>
    <form id="uploadForm">
        <input type="file" name="image" accept="image/">
        <button type="button" onclick="uploadImage()">上传图片</button>
    </form>
    <img id="preview" src="" alt="图片预览" style="display:none;">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function uploadImage() {
            var formData = new FormData(document.getElementById('uploadForm'));
            $.ajax({
                url: 'upload_img.php', // 服务器端处理文件的PHP脚本
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#preview').attr('src', response.previewUrl);
                    $('#preview').show();
                }
            });
        }
    </script>
</body>
</html>

2. JavaScript代码

在JavaScript中，通过FormData对象构建一个包含图片文件的表单数据，并将其发送到PHP文件，编写一个函数在上传按钮被点击时触发，获取选定的图片文件并使用FormData对象将其发送到PHP文件。

二、后端部分（PHP）

1. 接收上传的文件

ajax上传图片到PHP并压缩图片显示的方法

在服务器端创建一个PHP文件（如upload_img.php），用于处理上传的图片，检查是否有文件被上传，并获取上传的文件信息，示例代码如下：

<?php
if ($_FILES) {
    $tmpName = $_FILES['image']['tmp_name'];
    $fileSize = $_FILES['image']['size'];
    $fileType = $_FILES['image']['type'];
    $fileName = $_FILES['image']['name'];
} else {
    echo json_encode(['error' => 'No file uploaded']);
    exit;
}
?>

2. 移动和重命名文件

将上传的文件移动到指定目录，并为文件生成一个唯一的文件名，以避免文件名冲突，示例代码如下：

<?php
$uploadDir = './upload/';
$ext = pathinfo($fileName, PATHINFO_EXTENSION);
$baseFileName = pathinfo($fileName, PATHINFO_FILENAME);
$newFileName = $baseFileName . '_' . time() . '.' . $ext;
$targetPath = $uploadDir . $newFileName;
if (move_uploaded_file($tmpName, $targetPath)) {
    // 文件上传成功，进行下一步处理
} else {
    echo json_encode(['error' => 'Failed to move uploaded file']);
    exit;
}
?>

3. 压缩图片

ajax上传图片到PHP并压缩图片显示的方法

根据图片的类型创建一个新的图像资源，然后使用imagescale或imagecopyresampled函数来缩放图像，示例代码如下：

<?php
function compressImage($source, $destination, $quality = 80) {
    $info = getimagesize($source);
    if ($info['bits'] == 4) {
        $image = imagecreatefromgif($source);
    } elseif ($info['bits'] == 8) {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['bits'] == 16) {
        $image = imagecreatefrompng($source);
    }
    $newWidth = $info[0]  0.5;
    $newHeight = $info[1]  0.5;
    $thumb = imagecreatetruecolor($newWidth, $newHeight);
    imagecopyresampled($thumb, $image, 0, 0, 0, 0, $newWidth, $newHeight, $info[0], $info[1]);
    imagejpeg($thumb, $destination, $quality);
    imagedestroy($image);
    imagedestroy($thumb);
}
$compressedImagePath = $uploadDir . 'compressed_' . $newFileName;
compressImage($targetPath, $compressedImagePath);
?>

4. 返回响应

将压缩后的图片路径作为响应返回给前端，示例代码如下：

<?php
echo json_encode([
    'previewUrl' => $compressedImagePath,
    'originalName' => $fileName,
    'compressedName' => basename($compressedImagePath)
]);
?>

三、单元表格说明

步骤	描述	代码片段
前端HTML表单	创建一个包含文件上传的input标签，并设置enctype属性为multipart/form-data
前端JavaScript	通过FormData对象构建一个包含图片文件的表单数据，并将其发送到PHP文件	`var formData = new FormData(document.getElementById('uploadForm'));`
后端PHP接收文件	检查是否有文件被上传，并获取上传的文件信息	`if ($_FILES) {...}`
后端PHP移动和重命名文件	将上传的文件移动到指定目录，并为文件生成一个唯一的文件名	`move_uploaded_file($tmpName, $targetPath);`
后端PHP压缩图片	根据图片的类型创建一个新的图像资源，然后使用imagescale或imagecopyresampled函数来缩放图像	`compressImage($targetPath, $compressedImagePath);`
后端PHP返回响应	将压缩后的图片路径作为响应返回给前端	`echo json_encode(['previewUrl' => $compressedImagePath]);`