ajax(iframe)無刷新提交表單、上傳文件
更新時間:2011年01月06日 21:55:34 作者:
要通過ajax保存表單,一切都OK,測試也通過,卻發(fā)現(xiàn)文件沒有上傳成功!然后就有了用 ajax是否可以上傳文件的疑問。
找遍資料得出結(jié)果:不能
不過同時也找到了解決辦法,就是用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頁面應(yīng)該要有所表現(xiàn),這時就要用到上個頁面中的 function callback()了
echo ("<script type=\"text/javascript\">parent.callback('操作成功 ! ')</ script>");
不過同時也找到了解決辦法,就是用iframe的方式來提交表單,即實現(xiàn)無刷新提交表單又可以上傳文件!
一、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>無刷新提交表單</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頁面應(yīng)該要有所表現(xiàn),這時就要用到上個頁面中的 function callback()了
復(fù)制代碼 代碼如下:
echo ("<script type=\"text/javascript\">parent.callback('操作成功 ! ')</ script>");
您可能感興趣的文章:
- Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
- 詳解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)帶進(jìn)度條的Ajax文件上傳功能示例
- PHP使用HTML5 FileApi實現(xiàn)Ajax上傳文件功能示例
- php+ajax 文件上傳代碼實例
- PHP+Ajax實現(xiàn)上傳文件進(jìn)度條動態(tài)顯示進(jìn)度功能
- PHP+iframe模擬Ajax上傳文件功能示例
相關(guān)文章
解決AJAX返回狀態(tài)200沒有調(diào)用success的問題
今天小編就為大家分享一篇解決AJAX返回狀態(tài)200沒有調(diào)用success的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08ajax響應(yīng)json字符串和json數(shù)組的實例(詳解)
下面小編就為大家?guī)硪黄猘jax響應(yīng)json字符串和json數(shù)組的實例(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02ajax實現(xiàn)的提交文章前進(jìn)行敏感詞審核的代碼
在做“文章敏感詞匯審核”功能的時候,開始在把“審核”放在插入數(shù)據(jù)庫的時候,后來想有一個功能,能在用戶點擊“提交”按鈕的時候,給一個提示。這樣相對“友好”那么點。2010-02-02