搜索
設為首頁
加入收藏
首頁
編程語言
C語言
|
JAVA編程
Python編程
網頁編程
ASP編程
|
PHP編程
JSP編程
數據庫
MYSQL數據庫
|
SqlServer數據庫
Oracle數據庫
|
DB2數據庫
您现在的位置：
程式碼之家
>>
編程語言
> >>
網頁程式設計
>>
PHP 程式設計
>>
PHP 相關知識
PHP 利用 iframe 實現無刷新檔案上傳（AJAX 上傳前身）
編輯：PHP 相關知識
歷史背景與原理
在
XMLHttpRequest Level 2
支援
FormData
之前，主流做法是利用 `
` 將表單提交導向隱藏的 `
`，達到「視覺上無刷新」的效果。雖然現代專案應改用 <code>fetch</code>/<code>axios</code> + <code>FormData</code>，但理解此舊技法有助於維護舊系統。</p> <h2>完整實作流程</h2> <h3>1. 後端上傳處理 <code>upload.php</code></h3> <pre><code><?php function uploadFile($file) { $dest = __DIR__ . '/uploads/'; if (!is_dir($dest)) mkdir($dest, 0755, true); // 安全檢查：副檔名、MIME、大小 $allowed = ['jpg','jpeg','png','gif','pdf']; $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION)); if (!in_array($ext, $allowed)) return ['error' => '副檔名不允許']; if ($file['size'] > 5 * 1024 * 1024) return ['error' => '超過 5MB']; $newName = date('YmdHis') . '_' . bin2hex(random_bytes(8)) . '.' . $ext; if (move_uploaded_file($file['tmp_name'], $dest . $newName)) { return ['success' => true, 'filename' => $newName, 'path' => $dest . $newName]; } return ['error' => '移動檔案失敗']; } $result = uploadFile($_FILES['myfile'] ?? []); // 輸出 JS 呼叫父頁面 callback echo '<script>window.parent.stopUpload(' . json_encode($result) . ');</script>'; ?></code></pre> <h3>2. 前端頁面</h3> <pre><code><form id="upForm" action="upload.php" method="post" enctype="multipart/form-data" target="upload_target"> <input type="file" name="myfile" id="myfile" required> <button type="submit">上傳</button> </form> <iframe id="upload_target" name="upload_target" style="display:none;"></iframe> <div id="msg">待上傳</div> <script> function stopUpload(res) { const msg = document.getElementById('msg'); if (res.success) { msg.innerHTML = `成功：${res.filename}`; // 可進一步顯示縮圖、存入隱藏欄位供表單二次送出 } else { msg.innerHTML = `失敗：${res.error}`; } } </script></code></pre> <h2>關鍵點解析</h2> <ul> <li><strong>target 屬性</strong>：指向 `<iframe name="upload_target">`，表單回應將在 iframe 內載入，主頁面不跳轉。</li> <li><strong>回傳格式</strong>：後端輸出 `<script>window.parent.callback(...)</script>`，利用同源策略下的 `window.parent` 跨框架通訊。</li> <li><strong>安全性</strong>：務必驗證檔案類型（<code>finfo_file</code> 檢測真實 MIME）、限制大小、重新命名、存放於非公開目錄或雲端儲存。</li> </ul> <h2>現代替代方案（強烈建議）</h2> <pre><code>// 前端原生 fetch const formData = new FormData(); formData.append('myfile', fileInput.files[0]); fetch('upload.php', { method: 'POST', body: formData }) .then(r => r.json()) .then(res => { /* 處理結果 */ });</code></pre> <p>優點：無需 iframe、支援進度條 (<code>xhr.upload.onprogress</code>)、錯誤處理更清晰、可攔截取消。</p> <h2>總結</h2> <p>iframe 上傳是歷史產物，理解其運作原理（表單導向、跨框架通訊）有助於閱讀舊碼。新專案請直接使用 <code>FormData</code> + <code>fetch/axios</code>，並搭配後端統一回傳 JSON 格式。</p> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/gyphp/151706.html' >PHP 防 SQL 注入：從過時的 eregi 到 PDO 預處理最佳實踐</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/gyphp/151708.html' >PHP 圖片上傳類完整實作：驗證、縮圖、水印一站式解決</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/' target="_blank">PHP 相關知識</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/136376.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011614241593.png' width='100' height='70' alt='微信開發：六種回覆訊息類型完整範例' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/136376.html' target="_blank"><strong>微信開發：六種回覆訊息類型完整範例</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/136376.html' target="_blank"><p>微信公眾號被動回覆訊息總覽 收到使用者訊息後，需在 5 秒內</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138181.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011616160283.gif' width='100' height='70' alt='PHP 實現冒泡排序：算法原理、代碼實現、性能分析與優化替代方案' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138181.html' target="_blank"><strong>PHP 實現冒泡排序：算法原理、代碼實現、性能分析與優化替代方案</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138181.html' target="_blank"><p>PHP 實現冒泡排序：算法原理、代碼實現、性能分析與優化替代</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/144097.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011709561858.png' width='100' height='70' alt='Symfony 在中國移動 CMWAP 網路下的路由失效問題排查與修復' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/144097.html' target="_blank"><strong>Symfony 在中國移動 CMWAP 網路下的路由失效問題排查與修復</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/144097.html' target="_blank"><p>問題現象 使用 Symfony 框架開發手機 App 後台，</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138197.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011616162143.gif' width='100' height='70' alt='PHP 調用 Linux 指令實戰：以 exec() 實現多檔案打包下載 (ZipArchive 不可用時的替代方案)' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138197.html' target="_blank"><strong>PHP 調用 Linux 指令實戰：以 exec() 實現多檔案打包下載 (ZipArchive 不可用時的替代方案)</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/138197.html' target="_blank"><p>場景痛點 專案需將多個文字檔打包為 ZIP 提供下載。生產環</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/146909.html' target="_blank">深入 PHP 擴展開發：哈希表與數組的底層實現</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/141068.html' target="_blank">PHP 文件緩存工具類實戰：高併發下的輕量級頁面緩存方案</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/154012.html' target="_blank">PHP 表單重複提交防範全攻略：四大核心策略深度解析</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/140346.html' target="_blank">PHP 序列化與反序列化深度指南：serialize/unserialize、JSON、igbinary 與安全防範</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/159617.html' target="_blank">傳說中 Yahoo PHP 面試題與參考答案解析</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/147349.html' target="_blank">PHP 無限級分類菜單實作：利用 Path 路徑字段實現高效樹狀結構</a> <a href='https://code.yunyiwangluo.com/bianchen/gyphp/159515.html' target="_blank">PHP 圖形處理類：輕鬆實現水印與縮略圖生成</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/phpjc/' target="_self">PHP 基礎</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/phpzh/' target="_self">PHP 綜合知識</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/phprm/' target="_self">PHP 入門</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyphp/' target="_self">PHP 相關知識</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>
