AJAX 檔案上傳：透過隱藏 iframe 回傳圖片 URL 給父頁面的經典模式

場景

表單上傳圖片（同域），需在不重整頁面的情況下取得後端回傳的圖片 URL，並填入另一個 AJAX 請求的參數中。

經典解法：隱藏 iframe + JavaScript 回調

1. 頁面放置一個 <iframe name="uploadFrame" style="display:none"></iframe>。
2. 上傳 <form target="uploadFrame" action="/upload" method="post" enctype="multipart/form-data">。
3. 後端處理完成後，不回傳純文字 URL，而是回傳一段 HTML 腳本：

<script>
    window.parent.setPicUrl('/uploads/2015060160000001.gif');
</script>

4. 父頁面預先定義全域函式：

function setPicUrl(url) {
    document.getElementById('imgUri').value = url; // 填入隱藏欄位或變數
    // 可在此觸發後續 AJAX 提交
}

關鍵優勢

• 繞過瀏覽器同源策略限制（同域下 iframe 可存取 parent）。
• 無需 FileReader / FormData / XHR2，相容 IE8+ 等舊瀏覽器。
• 上傳與業務邏輯解耦，上傳成功後自動觸發業務流程。

現代替代方案

• Fetch / XMLHttpRequest Level 2：FormData 直接非同步上傳，回傳 JSON 含 URL，程式碼更簡潔（需 IE10+）。
• Plupload / WebUploader / FineUploader：成熟上傳元件，支援分塊、斷點續傳、多檔案佇列。

總結

舊專案或需相容舊瀏覽器時，「隱藏 iframe + parent 回調」是穩健的檔案上傳取回 URL 模式；新專案優先採用 Fetch + FormData。