功能概覽

此範例示範如何結合 PHP 與 jQuery Ajax，實現無刷新的遠端圖片批量抓取功能。支援兩種模式：指定單一圖片 URL 抓取、以及指定網頁 URL 解析並抓取其中所有圖片（含 CSS 背景圖）。

核心運作原理

1. 前端發送請求：使用者輸入目標網址與儲存路徑，透過 Ajax 非同步傳送至 image.info.php。
2. 後端接收處理：ImageCatch 類別接收參數，使用 file_get_contents 讀取目標內容。
3. 指定圖片抓取：直接讀取圖片二進位內容，以 file_put_contents 儲存。
4. 網頁全圖抓取：遞迴解析流程：
   • 抓取目標頁面 HTML，正則提取所有 <img> 的 src 屬性。
   • 提取所有 <link> 樣式表的 href，再抓取 CSS 檔案並正則提取 url() 背景圖。
   • 合併圖片陣列，計算總數，編碼為 JSON 回傳前端。
   • 前端收到 JSON 後，遞迴發送逐張抓取請求，直到佇列為空。

前端主程式 index.php 關鍵程式碼

<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
    var TargetUrl, Save;
    
    // 單張圖片抓取
    $('#content .h1 #Single').click(function() {
        TargetUrl = $('#content .h2 .TargetUrl').val();
        Save = $('#content .h2 .Save').val();
        if (!TargetUrl || !Save) return;
        
        var zurl = [TargetUrl];
        start_d(); // 禁用按鈕
        Crawl(zurl, Save);
    });
    
    // 遞迴抓取函式
    function Crawl(zurl, Save) {
        if (zurl.length > 0) {
            var curl = zurl[0];
            $.ajax({
                url: 'image.info.php?Single=Single',
                dataType: 'json',
                type: 'POST',
                data: 'TargetUrl=' + curl + '&Save=' + Save,
                success: function(data) {
                    if (data.status === 'ok') {
                        statusInfo('遠端圖片 <font>' + curl + '</font> 抓取成功，已儲存至 <font>' + data.FileSave + '</font>');
                        zurl.shift();
                        Crawl(zurl, Save); // 遞迴處理下一張
                    } else {
                        zurl.shift();
                        Crawl(zurl, Save);
                        statusInfo(data.status);
                    }
                }
            });
        } else {
            statusInfo('圖片抓取完畢');
            start_s(); // 釋放按鈕
        }
    }
    
    // 多圖抓取（網頁解析模式）邏輯類似，略...
});
</script>

後端 image.info.php 核心邏輯

<?php
class ImageCatch {
    public function catchImage($url, $savePath) {
        $content = file_get_contents($url);
        if ($content) {
            file_put_contents($savePath, $content);
            return ['status' => 'ok', 'FileSave' => $savePath, 'FileSize' => strlen($content)];
        }
        return ['status' => '抓取失敗'];
    }
    
    public function parsePageImages($url) {
        $html = file_get_contents($url);
        $images = [];
        
        // 提取 img 標籤
        preg_match_all('/<img[^>]+src=["\']([^"\']+)["\']/i', $html, $matches);
        $images = array_merge($images, $matches[1]);
        
        // 提取 CSS 背景圖
        preg_match_all('/<link[^>]+href=["\']([^"\']+\.css)["\']/i', $html, $cssMatches);
        foreach ($cssMatches[1] as $cssUrl) {
            $cssContent = file_get_contents($cssUrl);
            preg_match_all('/url\([\"\']?([^"\'\)]+)[\"\']?\)/i', $cssContent, $bgMatches);
            $images = array_merge($images, $bgMatches[1]);
        }
        
        return ['total' => count($images), 'list' => $images];
    }
}
?>

完整程式碼包含錯誤處理、進度顯示、按鈕狀態控制等細節，適合作為二次開發基礎。