ajax(iframe)無(wú)刷新提交表單、上傳文件
更新時(shí)間：2011年01月06日 21:55:34 作者：
要通過(guò)ajax保存表單，一切都OK，測(cè)試也通過(guò)，卻發(fā)現(xiàn)文件沒(méi)有上傳成功！然后就有了用 ajax是否可以上傳文件的疑問(wèn)。
找遍資料得出結(jié)果：不能
不過(guò)同時(shí)也找到了解決辦法，就是用iframe的方式來(lái)提交表單，即實(shí)現(xiàn)無(wú)刷新提交表單又可以上傳文件！
一、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>無(wú)刷新提交表單</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代碼（處理代碼）
這里的代碼就想怎么寫(xiě)怎么寫(xiě)了，不過(guò)這個(gè)里執(zhí)行完了剛才那個(gè)HMTL頁(yè)面應(yīng)該要有所表現(xiàn)，這時(shí)就要用到上個(gè)頁(yè)面中的 function callback()了
echo ("<script type=\"text/javascript\">parent.callback('操作成功 ! ')</ script>");
不過(guò)同時(shí)也找到了解決辦法，就是用iframe的方式來(lái)提交表單，即實(shí)現(xiàn)無(wú)刷新提交表單又可以上傳文件！
一、HTML代碼
復(fù)制代碼 代碼如下:
<!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>無(wú)刷新提交表單</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代碼（處理代碼）
這里的代碼就想怎么寫(xiě)怎么寫(xiě)了，不過(guò)這個(gè)里執(zhí)行完了剛才那個(gè)HMTL頁(yè)面應(yīng)該要有所表現(xiàn)，這時(shí)就要用到上個(gè)頁(yè)面中的 function callback()了
復(fù)制代碼 代碼如下:
echo ("<script type=\"text/javascript\">parent.callback('操作成功 ! ')</ script>");
您可能感興趣的文章:
- Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
- 詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)
- js動(dòng)態(tài)創(chuàng)建上傳表單通過(guò)iframe模擬Ajax實(shí)現(xiàn)無(wú)刷新
- iframe實(shí)現(xiàn)Ajax文件上傳效果示例
- 原生ajax和iframe框架實(shí)現(xiàn)圖片文件上傳的兩種方式
- PHP實(shí)現(xiàn)帶進(jìn)度條的Ajax文件上傳功能示例
- PHP使用HTML5 FileApi實(shí)現(xiàn)Ajax上傳文件功能示例
- php+ajax 文件上傳代碼實(shí)例
- PHP+Ajax實(shí)現(xiàn)上傳文件進(jìn)度條動(dòng)態(tài)顯示進(jìn)度功能
- PHP+iframe模擬Ajax上傳文件功能示例
相關(guān)文章
AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解
這篇文章主要介紹了AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
你的jquery ajax無(wú)效和你的jquery引入路徑有關(guān)
當(dāng)你發(fā)現(xiàn)你的jquery ajax無(wú)效的時(shí)候,不妨使用 fire bug調(diào)試一下，這時(shí)你會(huì)發(fā)現(xiàn)，提示"$"無(wú)效，為什么會(huì)有這種提示呢？可能是你引入jquery.js的路徑有問(wèn)題2013-06-06
以前寫(xiě)的一個(gè)AJAX類，兼容性還不錯(cuò)，簡(jiǎn)單易用，記下了方便以后找 :)2010-01-01
用AJAX技術(shù)實(shí)現(xiàn)在自己Blog上聚合并顯示朋友Blog的最新文章
在自己Blog上聚合并顯示朋友Blog的最新文章，這樣方便自己及時(shí)了解朋友的消息，另外，也方便訪問(wèn)者找到和本Blog相關(guān)的blog和文章2014-05-05
這篇文章主要介紹了json格式的Ajax提交，需要引入一些jar包及js包，示例代碼如下2014-08-08
將index.html和upload.php文件保存到支持php的空間的同級(jí)目錄，測(cè)試運(yùn)行即可2008-09-09
Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)
本文給大家介紹jquery ajax請(qǐng)求方法小結(jié)，jquery作為一個(gè)輕量級(jí)的js框架，能快速的開(kāi)發(fā)js應(yīng)用，并且在一定程度上改變了我們寫(xiě)js代碼的習(xí)慣，對(duì)jquery ajax請(qǐng)求感興趣的朋友參考下2015-11-11
ajax 不錯(cuò)的應(yīng)用...2006-07-07
Ajax傳遞中文參數(shù)到后臺(tái)亂碼的有效解決方法
使用Ajax傳遞中文參數(shù)，如果不對(duì)參數(shù)進(jìn)行處理的話，傳到后臺(tái)會(huì)變成亂碼，解決方法很簡(jiǎn)單，需要的朋友可以參考下本文2014-05-05
ajax異步處理POST表單中的數(shù)據(jù)示例代碼
這篇文章主要介紹了如何利用ajax異步處理POST表單中的數(shù)據(jù)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-06-06