ajax(iframe)無刷新提交表單、上傳文件
更新時間：2011年01月06日 21:55:34 作者：
要通過ajax保存表單，一切都OK，測試也通過，卻發(fā)現(xiàn)文件沒有上傳成功！然后就有了用 ajax是否可以上傳文件的疑問。
找遍資料得出結果：不能
不過同時也找到了解決辦法，就是用iframe的方式來提交表單，即實現(xiàn)無刷新提交表單又可以上傳文件！
一、HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無刷新提交表單</title>
<script type="text/javascript">
<!--
function callback(str){
alert(str);
}
// --></script>
</head>
<body>
<form name="form1" method="POST" action="../post.php" target="post_frame" enctype="multipart/form-data">
<iframe name='post_frame' id="post_frame" style="display:none;" mce_style="display:none;"></iframe>
<input type="file" name="img" />
<input name="power[]" type="text"/>
<input type="submit" value="完成以上修改" name="submit" />
</form>
</body>
</html>
二、PHP代碼（處理代碼）
這里的代碼就想怎么寫怎么寫了，不過這個里執(zhí)行完了剛才那個HMTL頁面應該要有所表現(xiàn)，這時就要用到上個頁面中的 function callback()了
echo ("<script type=\"text/javascript\">parent.callback('操作成功 ! ')</ script>");
不過同時也找到了解決辦法，就是用iframe的方式來提交表單，即實現(xiàn)無刷新提交表單又可以上傳文件！
一、HTML代碼
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無刷新提交表單</title>
<script type="text/javascript">
<!--
function callback(str){
alert(str);
}
// --></script>
</head>
<body>
<form name="form1" method="POST" action="../post.php" target="post_frame" enctype="multipart/form-data">
<iframe name='post_frame' id="post_frame" style="display:none;" mce_style="display:none;"></iframe>
<input type="file" name="img" />
<input name="power[]" type="text"/>
<input type="submit" value="完成以上修改" name="submit" />
</form>
</body>
</html>
二、PHP代碼（處理代碼）
這里的代碼就想怎么寫怎么寫了，不過這個里執(zhí)行完了剛才那個HMTL頁面應該要有所表現(xiàn)，這時就要用到上個頁面中的 function callback()了
復制代碼 代碼如下:
echo ("<script type=\"text/javascript\">parent.callback('操作成功 ! ')</ script>");
您可能感興趣的文章:
- Ajax方式提交帶文件上傳的表單及隱藏iframe應用
- 詳解Ajax和form+iframe 實現(xiàn)文件上傳的方法(兩種方式)
- js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新
- iframe實現(xiàn)Ajax文件上傳效果示例
- 原生ajax和iframe框架實現(xiàn)圖片文件上傳的兩種方式
- PHP實現(xiàn)帶進度條的Ajax文件上傳功能示例
- PHP使用HTML5 FileApi實現(xiàn)Ajax上傳文件功能示例
- php+ajax 文件上傳代碼實例
- PHP+Ajax實現(xiàn)上傳文件進度條動態(tài)顯示進度功能
- PHP+iframe模擬Ajax上傳文件功能示例
相關文章
AJAX實現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解
這篇文章主要介紹了AJAX實現(xiàn)JSON與XML數(shù)據(jù)交換方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
你的jquery ajax無效和你的jquery引入路徑有關
當你發(fā)現(xiàn)你的jquery ajax無效的時候,不妨使用 fire bug調(diào)試一下，這時你會發(fā)現(xiàn)，提示"$"無效，為什么會有這種提示呢？可能是你引入jquery.js的路徑有問題2013-06-06
以前寫的一個AJAX類，兼容性還不錯，簡單易用，記下了方便以后找 :)2010-01-01
用AJAX技術實現(xiàn)在自己Blog上聚合并顯示朋友Blog的最新文章
在自己Blog上聚合并顯示朋友Blog的最新文章，這樣方便自己及時了解朋友的消息，另外，也方便訪問者找到和本Blog相關的blog和文章2014-05-05
這篇文章主要介紹了json格式的Ajax提交，需要引入一些jar包及js包，示例代碼如下2014-08-08
將index.html和upload.php文件保存到支持php的空間的同級目錄，測試運行即可2008-09-09
本文給大家介紹jquery ajax請求方法小結，jquery作為一個輕量級的js框架，能快速的開發(fā)js應用，并且在一定程度上改變了我們寫js代碼的習慣，對jquery ajax請求感興趣的朋友參考下2015-11-11
ajax 不錯的應用...2006-07-07
使用Ajax傳遞中文參數(shù)，如果不對參數(shù)進行處理的話，傳到后臺會變成亂碼，解決方法很簡單，需要的朋友可以參考下本文2014-05-05
ajax異步處理POST表單中的數(shù)據(jù)示例代碼
這篇文章主要介紹了如何利用ajax異步處理POST表單中的數(shù)據(jù)，下面有個不錯的示例，大家可以參考下2014-06-06