您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP + JS 實現無刷新頭像上傳即時預覽完整方案

編輯：PHP 相關知識

方案架構：iframe 無刷新 + 服務端圖片處理

利用隱藏 <iframe> 作為表單提交目標，避免頁面跳轉；服務端處理上傳、裁剪、壓縮，返回 JSON 狀態；前端輪詢 iframe 獲取結果並更新預覽。此方案兼容性極佳，無需 FileReader/FormData 支持。

1. 前端頁面結構

<div class="avatar-upload">
    <img id="avatarPreview" class="thumb" src="/default-avatar.png" alt="頭像預覽">
    <iframe id="uploadIframe" name="uploadIframe" style="display:none;"></iframe>
    <form id="uploadForm" target="uploadIframe" action="/api/upload-avatar" method="post" enctype="multipart/form-data">
        <input type="file" name="avatar" id="avatarInput" accept="image/*" style="display:none;">
        <input type="hidden" name="uid" value="<?= $userId ?>">
        <button type="button" id="selectBtn">選擇頭像</button>
        <button type="submit" id="submitBtn" style="display:none;">上傳</button>
    </form>
</div>

2. JavaScript 交互邏輯

<script>
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);

const form = $('#uploadForm');
const fileInput = $('#avatarInput');
const submitBtn = $('#submitBtn');
const preview = $('#avatarPreview');
const iframe = $('#uploadIframe');

$('#selectBtn').onclick = () => fileInput.click();

fileInput.onchange = () => {
    if (fileInput.files.length) {
        submitBtn.click(); // 自動提交
    }
};

iframe.onload = () => {
    try {
        const doc = iframe.contentDocument || iframe.contentWindow.document;
        const msgEl = doc.querySelector('.iframe_message');
        if (!msgEl) return;
        
        const status = msgEl.getAttribute('status');
        const message = msgEl.textContent;
        
        if (status === '1') {
            // 成功：更新預覽（利用時間戳防緩存）
            preview.src = `/upload/avatar/<?= $userId ?>.jpg?t=${Date.now()}`;
        }
        alert(message); // 可替換為 Toast 提示
    } catch (e) {
        console.error('解析上傳響應失敗', e);
    }
};
</script>

3. 服務端處理核心（PHP）

<?php
// upload-avatar.php
require_once 'config.php';
require_once 'functions.php';

$uid = (int)($_POST['uid'] ?? 0);
$user = getUserById($uid);
if (!$user) exit(jsonMsg(0, '用戶不存在'));

$uploadDir = __DIR__ . '/../upload/avatar/';
if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);

$allowedExt = ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'];
$maxSize = 2 * 1024 * 1024; // 2MB

if (empty($_FILES['avatar']) || $_FILES['avatar']['error'] !== UPLOAD_ERR_OK) {
    exit(jsonMsg(0, '無有效文件上傳'));
}

$file = $_FILES['avatar'];
if ($file['size'] > $maxSize) exit(jsonMsg(0, '文件超過 2MB 限制'));

// 驗證真實圖片類型
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $file['tmp_name']);
finfo_close($finfo);
$ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
if (!in_array($mime, ['image/jpeg', 'image/png', 'image/gif', 'image/webp']) 
    || !in_array($ext, $allowedExt)) {
    exit(jsonMsg(0, '不支持的文件類型'));
}

// 刪除舊頭像
foreach (glob($uploadDir . $uid . '.*') as $old) {
    @unlink($old);
}

// 保存新文件
$newName = $uid . '.' . $ext;
$destPath = $uploadDir . $newName;
if (!move_uploaded_file($file['tmp_name'], $destPath)) {
    exit(jsonMsg(0, '文件保存失敗'));
}

// 圖片處理：裁剪正方形 + 壓縮 100x100
try {
    $image = ImageManager::make($destPath);
    $size = min($image->width(), $image->height());
    $image->crop($size, $size, 0, 0)
          ->resize(100, 100)
          ->save($destPath, 85); // 質量 85%
} catch (Exception $e) {
    error_log('圖片處理失敗: ' . $e->getMessage());
}

// 更新數據庫
updateUser($uid, ['avatar' => time(), 'avatar_ext' => $ext]);

exit(jsonMsg(1, '上傳成功'));

// 輔助函數
function jsonMsg(int $status, string $msg): string {
    header('Content-Type: text/html; charset=utf-8');
    return "<p class='iframe_message' status='$status'>$msg</p>";
}
?>

4. 圖片處理工具類（基於 GD）

<?php
class ImageManager
{
    public static function make(string $path): GdImage
    {
        $info = getimagesize($path);
        if (!$info) throw new Exception('無效圖片文件');
        
        return match ($info[2]) {
            IMAGETYPE_JPEG => imagecreatefromjpeg($path),
            IMAGETYPE_PNG => imagecreatefrompng($path),
            IMAGETYPE_GIF => imagecreatefromgif($path),
            IMAGETYPE_WEBP => imagecreatefromwebp($path),
            default => throw new Exception('不支持的圖片格式')
        };
    }
    
    public static function crop(GdImage $img, int $w, int $h, int $x = 0, int $y = 0): GdImage
    {
        $dst = imagecreatetruecolor($w, $h);
        imagecopyresampled($dst, $img, 0, 0, $x, $y, $w, $h, $w, $h);
        imagedestroy($img);
        return $dst;
    }
    
    public static function resize(GdImage $img, int $w, int $h): GdImage
    {
        $srcW = imagesx($img);
        $srcH = imagesy($img);
        $dst = imagecreatetruecolor($w, $h);
        // 保持透明度
        if (in_array(image_type_to_mime_type(imagesx($img)), ['image/png', 'image/gif', 'image/webp'])) {
            imagealphablending($dst, false);
            imagesavealpha($dst, true);
        }
        imagecopyresampled($dst, $img, 0, 0, 0, 0, $w, $h, $srcW, $srcH);
        imagedestroy($img);
        return $dst;
    }
    
    public static function save(GdImage $img, string $path, int $quality = 90): bool
    {
        $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
        return match ($ext) {
            'jpg', 'jpeg' => imagejpeg($img, $path, $quality),
            'png' => imagepng($img, $path, (int)($quality / 10)),
            'gif' => imagegif($img, $path),
            'webp' => imagewebp($img, $path, $quality),
            default => false
        };
    }
}
?>