PHP 無刷新上傳文件：iframe 方案完整實現

利用隱藏 iframe 作為表單提交目標，實現無刷新文件上傳，兼容性優於早期 AJAX 方案。

前端頁面 index.html

<html>
<head>
<title>無刷新上傳文件</title>
<meta content-type="text/html" charset="utf-8" />
<script type="text/javascript">
function startUpload() {
    document.getElementById('processing').innerHTML = 'loading...';
    return true;
}
function stopUpload(rel) {
    var msg;
    switch (rel) {
        case 0: msg = "上傳成功"; break;
        case 1: msg = "上傳的文件超過限制"; break;
        case 2: msg = "只能上傳圖片文件"; break;
        default: msg = "上傳文件失敗";
    }
    document.getElementById('processing').innerHTML = msg;
}
</script>
</head>
<body>
<div style="text-align:center">
<div id="processing"></div>
<form action="upload.php" method="post" enctype="multipart/form-data" target="form-target" onsubmit="startUpload();">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<input type="file" name="myfile" />
<input type="submit" name="sub" value="upload" />
</form>
<iframe style="width:0; height:0; border:0;" name="form-target"></iframe>
</div>
</body>
</html>

後端處理 upload.php

<?php
sleep(2); // 模擬處理延遲
$fileTypes = array('jpg','png','gif','bmp');
$result = null;
$uploadDir = './upfiles';
$maxSize = 1 * pow(2,20); // 1MB

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['sub'])) {
    $myfile = $_FILES['myfile'];
    $myfileType = substr($myfile['name'], strrpos($myfile['name'], ".") + 1);
    
    if ($myfile['size'] > $maxSize) {
        $result = 1;
    } else if (!in_array($myfileType, $fileTypes)) {
        $result = 2;
    } elseif (is_uploaded_file($myfile['tmp_name'])) {
        $toFile = $uploadDir . '/' . $myfile['name'];
        if (@move_uploaded_file($myfile['tmp_name'], $toFile)) {
            $result = 0;
        } else {
            $result = -1;
        }
    } else {
        $result = 1;
    }
}
?>
<script type="text/javascript">
window.top.window.stopUpload(<?php echo $result; ?>);
</script>

關鍵點解析

• target="form-target" 指向隱藏 iframe，頁面不跳轉
• enctype="multipart/form-data" 必須設置
• 服務端執行完畢輸出 JS 調用父頁面 stopUpload() 回調結果
• 包含文件類型、大小驗證，安全性較好

此方案無需 JavaScript 處理二進制數據，兼容性極佳，是 HTML5 FormData 普及前的主流無刷新上傳方案。