使用iframe僞裝異步上傳文件
在不支持html5的前提下，ajax技術是無法實現文件的異步上傳，原因很簡單，ajax本質上還是js寫的，而js是不能操作瀏覽器端的主機，不能操作硬盤上的文件。所以無法上傳文件。但是我們可以通過iframe內聯框架，來僞裝實現無頁面的跳轉的異步上傳。
使用iframe僞異步上傳的原理很簡單，我們知道在提交表單後，必然會跳轉頁面，但是如果我們在上傳文件的頁面內聯一個框架作爲表單提交後的頁面，不就好像沒有跳轉頁面了嗎？同時我們可以把這個內聯框架隱藏起來，就更加像是異步上傳了。
說到這你可能會說，那服務器回傳的上傳文件情況的提示信息怎麼辦呢？沒有關係，我們可以在後臺寫js字符串輸入前臺，控制頁面顯示，上傳的提示信息。
所以思路如下；
1.在頁面文件，寫好上傳文件的表單和iframe框架
2.在後臺文件。寫好保存文件並且寫js代碼字符串，來控制前臺的信息顯示。
前臺文件upload.html的全部代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>iframe僞異步上傳文件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
</head>
<body>
<h2 id='info'></h2>
<form action='./move_file.php' method='POST' target='iframe' enctype='multipart/form-data'><!-- 通過tartget設置表單提交後跳轉的地方-->
<input type='file' name='pic' />
<input type='submit' value='提交'/>
</form>
<iframe name='iframe' width='0px' height='0px' frameborder='0'></iframe><!-- 將iframe的高寬，邊框都設置爲0，相當於隱藏了-->
</body>後臺文件 move_file.php
<?php
if(empty($_FILES))
{
$text='上傳爲空文件';
die(returnText($text));
}
if($_FILES['pic']['error']!=0)
{
$text='文件上傳出錯';
die(returnText($text));
}
move_uploaded_file($_FILES['pic']['tmp_name'],'./'.$_FILES['pic']['name']);
$text='文件上傳成功！';
echo returnText($text);
//通過returnText函數，將上傳提示信息，加入js代碼字符串中。
function returnText($text)
{
return "<script>parent.document.getElementById('info').innerHTML='$text';</script>";
/*因爲表單設定，跳轉頁面是iframe，所以寫js首先，要通過iframe的dom對象parent，獲得upload.html主頁面
dom對象，才能通過document.getElementById('info')獲取頁面上的<h2 id='info'></h2> dom對象，從而顯示提示信息。
*/
}
?>
這種雖然在視覺上實現了類似異步上傳，無頁面刷新的效果但是，還不是真正的異步上傳文件，值得慶幸的是，在html5中已經支持了ajax的異步上傳，並且現在的瀏覽器大多數已經支持了。在下一文章中我將介紹用ajax技術實現文件異步上傳。