搜索
設為首頁
加入收藏
首頁
編程語言
C語言
|
JAVA編程
Python編程
網頁編程
ASP編程
|
PHP編程
JSP編程
數據庫
MYSQL數據庫
|
SqlServer數據庫
Oracle數據庫
|
DB2數據庫
您现在的位置：
程式碼之家
>>
編程語言
> >>
網頁程式設計
>>
PHP 程式設計
>>
PHP 綜合知識
PHP + iframe 實作無刷新頭像上傳
編輯：PHP 綜合知識
核心原理
利用 `
` 將表單提交導向隱藏的 `
`，主頁面不跳轉。iframe 載入完成後，透過 JavaScript 讀取 iframe 內容判斷結果並更新 UI。</p> <h2>完整實作</h2> <h3>1. HTML 結構</h3> <pre><code><!-- 頁面模板 --> <form id="uploadForm" action="/api/upload/avatar" method="POST" enctype="multipart/form-data" target="uploadIframe"> <div class="avatar-preview"> <img id="avatarImg" src="<?= $user->avatarUrl ?: '/static/default-avatar.png' ?>" width="100" height="100" alt="頭像"> </div> <input type="file" name="avatar" id="avatarInput" accept="image/*" required> <input type="hidden" name="csrf_token" value="<?= Yii::app()->request->csrfToken ?>"> <button type="submit" id="uploadBtn" style="display:none">上傳</button> </form> <!-- 隱藏 iframe 接收回應 --> <iframe id="uploadIframe" name="uploadIframe" style="display:none;"></iframe></code></pre> <h3>2. 後端處理 (PHP)</h3> <pre><code><?php // /api/upload/avatar public function actionUploadAvatar() { // 僅接受 iframe POST if (!Yii::app()->request->isPostRequest) { $this->renderError('非法請求'); } $user = User::current(); if (!$user) { $this->renderError('請先登入'); } $file = CUploadedFile::getInstanceByName('avatar'); if (!$file) { $this->renderError('未選擇檔案'); } // 驗證 $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; if (!in_array($file->getType(), $allowedTypes)) { $this->renderError('僅支援 JPG/PNG/GIF/WebP 格式'); } if ($file->getSize() > 2 * 1024 * 1024) { // 2MB $this->renderError('檔案不得超過 2MB'); } // 儲存路徑：/uploads/avatar/{uid}.{ext} $dir = Yii::getPathOfAlias('webroot') . '/uploads/avatar/'; if (!is_dir($dir)) mkdir($dir, 0755, true); // 刪除舊頭像 (同 uid 不同副檔名) foreach (glob($dir . $user->id . '.*') as $old) @unlink($old); $ext = strtolower($file->getExtensionName()); $saveName = $user->id . '.' . $ext; $savePath = $dir . $saveName; if (!$file->saveAs($savePath)) { $this->renderError('檔案儲存失敗'); } // 產生縮圖 (使用 PHPThumb/Intervention/GD) $this->createThumbs($savePath, $dir, $user->id); // 更新用戶記錄 (用時間戳防快取) $user->avatar_updated = time(); $user->save(false); // 成功回應：iframe 會載入此 HTML $this->renderSuccess($saveName); } // 統一 iframe 回應格式 private function renderSuccess($filename) { header('Content-Type: text/html; charset=utf-8'); echo '<p class="iframe-msg" data-status="1" data-filename="' . htmlspecialchars($filename) . '">上傳成功</p>'; Yii::app()->end(); } private function renderError($msg) { header('Content-Type: text/html; charset=utf-8'); echo '<p class="iframe-msg" data-status="0">' . htmlspecialchars($msg) . '</p>'; Yii::app()->end(); } ?></code></pre> <h3>3. 前端 JavaScript (jQuery)</h3> <pre><code><script> $(function() { const $form = $('#uploadForm'); const $input = $('#avatarInput'); const $btn = $('#uploadBtn'); const $img = $('#avatarImg'); const $iframe = $('#uploadIframe'); // 選擇檔案後自動提交 $input.on('change', function() { if (this.files.length) { $btn.trigger('click'); // 觸發隱藏 submit } }); // iframe 載入完成事件 $iframe.on('load', function() { try { const doc = this.contentDocument || this.contentWindow.document; const $msg = $(doc).find('.iframe-msg'); if (!$msg.length) return; // 非預期回應 const status = $msg.data('status'); const message = $msg.text(); if (status == '1') { // 成功：更新頭像圖片 (加時間戳防快取) const filename = $msg.data('filename'); const newSrc = '/uploads/avatar/' + filename + '?t=' + Date.now(); $img.attr('src', newSrc); showToast('頭像更新成功'); } else { showToast('上傳失敗: ' + message); } } catch (e) { console.error('iframe 回應解析失敗', e); showToast('上傳回應異常'); } }); }); </script></code></pre> <h2>進階：支援裁切/預覽 (整合 Cropper.js)</h2> <pre><code><!-- 頁面加入 Cropper 模態框 --> <div id="cropperModal" class="modal" style="display:none;"> <img id="cropperImage" src=""> </div> <script> // 選擇檔案 → 讀取預覽 → 開啟裁切模態框 $input.on('change', function() { const file = this.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (e) => { $('#cropperImage').attr('src', e.target.result); $('#cropperModal').show(); // 初始化 Cropper const cropper = new Cropper('#cropperImage', { aspectRatio: 1, viewMode: 1, autoCropArea: 1, }); // 確認裁切 → 轉 Blob → 追加到 FormData → AJAX 上傳 $('#cropConfirm').one('click', () => { cropper.getCroppedCanvas().toBlob((blob) => { const formData = new FormData(); formData.append('avatar', blob, 'avatar.jpg'); // 此處改用 AJAX 上傳 (非 iframe) $.ajax({ url: '/api/upload/avatar', type: 'POST', data: formData, processData: false, contentType: false, success: (res) => { /* 同前處理 */ } }); }, 'image/jpeg', 0.9); }); }; reader.readAsDataURL(file); }); </script></code></pre> <h2>安全性檢查清單</h2> <table> <thead> <tr><th>風險</th><th>防護措施</th></tr> </thead> <tbody> <tr><td>檔案類型偽裝</td><td>伺服端用 <code>finfo</code> 驗證 MIME，不信任副檔名</td></tr> <tr><td>惡意腳本上傳</td><td>儲存目錄設定 <code>php_flag engine off</code> (Apache) 或 Nginx <code>location ~ \.php$ { deny all; }</code></td></tr> <tr><td>檔名路徑遍歷</td><td>使用固定命名規則 (uid.ext)，不採用用戶檔名</td></tr> <tr><td>CSRF 攻擊</td><td>表單加入 CSRF Token，後端驗證</td></tr> <tr><td>大檔案 DoS</td><td>限制 <code>upload_max_filesize</code>、<code>client_max_body_size</code></td></tr> </tbody> </table> <h2>現代替代方案</h2> <p>若專案支援 IE10+，建議改用 <strong>FormData + AJAX (fetch/XHR)</strong> 完全取代 iframe，體驗更好、錯誤處理更簡單。iframe 方案僅作為舊瀏覽器相容備案。</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/phpzh/62487.html' >Yii 1.x 表單模型與陣列式提交完整實作</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/phpzh/62489.html' >PHP 陣列查找函數效能對比：in_array vs array_search vs array_key_exists</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/' target="_blank">PHP 綜合知識</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/63443.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011015443806_S.gif' width='100' height='70' alt='PHP 快取技術全景圖：從頁面靜態化到 Opcode、Redis、Varnish 選型指南' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/63443.html' target="_blank"><strong>PHP 快取技術全景圖：從頁面靜態化到 Opcode、Redis、Varnish 選型指南</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/63443.html' target="_blank"><p>為什麼需要快取？ 高併發下，資料庫查詢、複雜運算、外部 AP</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/61452.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011013542283_S.jpg' width='100' height='70' alt='ThinkPHP 5 分頁類封裝：一行代碼實現帶參數、中文、自定義樣式的分頁' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/61452.html' target="_blank"><strong>ThinkPHP 5 分頁類封裝：一行代碼實現帶參數、中文、自定義樣式的分頁</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/61452.html' target="_blank"><p>痛點 TP 手冊分頁代碼冗長：每次需實例化 Page、設置配</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/58877.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011012211033_S.jpg' width='100' height='70' alt='PHP + AJAX 實作無重整新聞留言系統完整教學' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/58877.html' target="_blank"><strong>PHP + AJAX 實作無重整新聞留言系統完整教學</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/58877.html' target="_blank"><p>結合 PHP 後端、MySQL、jQuery AJAX 實作</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/109918.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011314260508_S.jpg' width='100' height='70' alt='LNMP 0.5 一鍵安裝包完整教學：Nginx + MySQL + PHP 高效架構部署' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/109918.html' target="_blank"><strong>LNMP 0.5 一鍵安裝包完整教學：Nginx + MySQL + PHP 高效架構部署</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/109918.html' target="_blank"><p>LNMP (Linux + Nginx + MySQL + </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/phpzh/68283.html' target="_blank">PHP 字串分段技巧：依標點符號切割長文字</a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/67904.html' target="_blank">PHP 萬年曆：西曆/農曆/干支/節氣/節日整合顯示 (1901-2020)</a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/66757.html' target="_blank">PHP XMLHTTP 中文亂碼問題解決：Resin 環境下的編碼陷阱與對策</a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/64345.html' target="_blank">PHP 時間戳與日期轉換完全指南：從基礎函數到相對時間顯示</a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/61063.html' target="_blank">PHP mysql_field_type() 函數用法說明</a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/122060.html' target="_blank">Smarty truncate 修饰符详解：中文截取陷阱与 mb_truncate 替代方案</a> <a href='https://code.yunyiwangluo.com/bianchen/phpzh/60595.html' target="_blank">10 個超實用 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>
