偽 AJAX 圖片上傳：利用隱藏 iframe 實現無刷新回顯

在不支援 FormData 與 XMLHttpRequest Level 2 的舊瀏覽器環境，或是為了快速相容既有表單流程，常用「隱藏 iframe + form target」技巧模擬 AJAX 檔案上傳。本文提供一個面向物件封裝的完整範例，上傳完成後由伺服器端執行 JavaScript 回呼，前端動態插入圖片預覽。

單檔完整實作

<?php
if ($_FILES) {
?>
  <script>
    window.parent.ajaxUploadPicture.uploadCallback('https://example.com/uploaded/preview.jpg');
  </script>
<?php
  die;
}
?>
<!DOCTYPE html>
<html>
<head>
  <script>
  ajaxUploadPicture = { $o1: '' };

  ajaxUploadPicture.ajaxUploadFile = function($o) {
    this.$o1 = $o;
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $iframe.name = $iframe.id = 'iframe';
    document.body.appendChild($iframe);

    var $form = document.createElement('form');
    $form.method = 'post';
    $form.enctype = 'multipart/form-data';
    $form.action = '';
    $form.target = 'iframe';
    var $newO = $o.cloneNode();
    $form.appendChild($newO);
    $form.submit();
  };

  ajaxUploadPicture.uploadCallback = function($url) {
    var $pic = document.createElement('img');
    $pic.width = 200; $pic.height = 150; $pic.src = $url;

    var $div = document.getElementById('picshow');
    if (!$div) {
      $div = document.createElement('div');
      $div.id = 'picshow';
      this.$o1.parentNode.insertBefore($div, this.$o1.nextSibling);
    }
    $div.innerHTML = '';
    $div.appendChild($pic);
  };
  </script>
</head>
<body>
  <input type="file" name="file" onchange="ajaxUploadPicture.ajaxUploadFile(this);">
</body>
</html>

運作流程圖解

1. 使用者選擇檔案 → 觸發 onchange。
2. JS 動態建立 <iframe name="iframe"> 並隱藏。
3. 複製 <input type="file"> 到新 <form target="iframe">，送出表單。
4. 伺服器處理上傳，回傳一段 <script>parent.ajaxUploadPicture.uploadCallback('圖片URL')</script>。
5. iframe 載入腳本 → 執行父視窗回呼函式 → 前端建立 <img> 顯示預覽。

優缺點與現代替代方案

現代專案建議直接使用 fetch + FormData 或 axios，配合後端回傳 JSON，支援進度條、錯誤碼、取消上傳等完整功能。