人們似乎慢慢遺忘了iframe。畢竟在ajax未誕生前。都是用iframe來實現無刷新的效果。當請教iframe實現無刷新知識時。他們說從來沒用過。iframe是什么？。無奈。只有自己摸索，畢竟我屬入門級別。下面的方法從效率上好不好。我也說不清。
已有的用戶注冊表單，現優化實現如下功能
- 用戶選擇圖片及時判斷圖片大小，不符合的話清空value
- 點提交按鈕判斷驗證碼是否正確。頁面不能刷新，且要保證符合要求的file的vlaue存在。因為只要頁面不刷新。value的值就會存在
思路:
- 因為file是Readonly，想清空value。只能用新的file替換之前的file
- 想頁面不刷新。首選當然是ajax請求，給每個file注冊onchang事件
我們可以動態給每個file注冊onchang事件，我這里用bind代替live。它的好處是。在頁面加載完成后添加的file也會被注冊onchang事件。因為我這里允許用戶動態添加file。
$(function () { $("[type=file]").live("change", function () { //執行代碼 }) })
但動態注冊的onchang事件觸發的條件：1:文本框值發生改變 、2：文本框失去焦點
所以這里達不到及時驗證。體驗不好，故而給頁面已有的file加上onchang事件。動態添加的file也同時添加onchang事件。
如：動態添加的file，給fileEven()函數加個參數，當觸發時把對象傳過去。可以獲取當前file的屬性
var html = '<dl class="clear" ><dt>iframe+ajaxSubmit圖片上傳：</dt><dd><input id="file" name="FilePath" onchange="fileEven(this);" type="file"/></dd></dl>';
既然是在后台判斷大小。當然就用不了$.get。$.post提交。難道你想在把value傳到后台。在后台fileInfo讀取文件嗎？額，當時也這么想過。！！！，那我們必須把表單提交，后台HttpPostedFile接收。那么選擇form插件提交表單：jquery.form.js，
我們准備一個iframe。表單提交給iframe。會刷新iframe。不會刷新頁面。方能保存file中的value，把表單提交到iframe很簡單。上篇博文也介紹了
這里准備一個iframe。設置為隱藏
<!--隱藏的iframe來接受表單提交的信息 頁面會在iframe中刷新。不會刷新from 達到保存表單中文本框的值--> <iframe id="Iframe1" name="ajaxifr" style="display: none;"></iframe>
把表單的target屬性指向iframe的name ，表單的enctype屬性記得設置為：multipart/form-data 。我這里是沒設置action。因為是提交給當前頁面
<form id="form1" runat="server" method="post" enctype="multipart/form-data" target="ajaxifr" >
提供一張表單屬性圖
AjaxSubmit提交表單
View Code
//每個file的onchang事件 ，這里當文件無效，不合法等都替用一個新的file替換之前的file。用來達到清空value的目的 function fileEven(type) { //用戶選取圖片時。接收當前對象 var file = $(type); file.attr("name", "fileSrc"); //給當前file取個唯一name。在后台統一接收 if (CheckFilePath(file)) { //CheckFilePath(file)是驗證圖片格式的函數。簡單的一個正則表達式 $("#form1").ajaxSubmit({ //ajaxSubmit提交表單，這里要區分ajaxForm success: function (data) { if (data == "no") { alert("不能上傳大於300Kb的圖片!"); //默認是4M。所以記得在web.config配置上限大小 //file的id是唯一標識。所有我采用時間的毫秒。如果你怕重復。可以選擇number累加 file.parent().html("<input type='file' style='width: 259px' id='file" + new Date().getMilliseconds() + "' name='file' onchange='fileEven(this)'/>"); return; } else if (data == "null") { alert("圖片無效！"); file.parent().html("<input type='file' style='width: 259px' id='file" + new Date().getMilliseconds() + "' name='file' onchange='fileEven(this)'/>"); return; } file.attr("name", "" + new Date().getMilliseconds() + ""); //記住：被判斷過的file其name都是fileSrc。這里得改掉。避免重復。用毫秒數 } }); } else { //否則文件格式無效 alert('圖片格式無效，僅支持\r\njpeg、jpg、bmp、gif 圖片！'); file.parent().html("<input id='file" + new Date().getMilliseconds() + "' style='width: 259px' type='file' name='file' onchange='fileEven(this)'/>"); }
簡單區分下JQuery中的AjaxForm和AjaxSubmit。
AjaxForm
ajaxForm不能提交表單。在document的ready函數中，使用ajaxForm來為AJAX提交表單進行准備。提交動作必須由submit開始
<html> <head> <script src="Scripts/jquery.js"></script> <script src="Scripts/jquery.form.js"></script> <script> // DOM加載后初始化 $(document).ready(function() { // 綁定"myForm”,並提供一個簡單的回調函數 $('#myForm').ajaxForm(function() { alert("我不提交表單,我只是為后續提交表單做准備!"); }); }); </script> </head>
AjaxSubmit
馬上由AJAX來提交表單。你可以在任何情況下進行該項提交。
在web.config配置文件上限
<!--設置最大上傳文件，單位KB、此處設置的為25M--> <httpRuntime maxRequestLength="25600" useFullyQualifiedRedirectUrl="true" executionTimeout="6000" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" enableVersionHeader="true" />
提交。在后台接收並判斷
//判斷圖片的大小 string msg = string.Empty; HttpPostedFile file = Request.Files["fileSrc"]; int bytes = file.ContentLength; //獲取圖片字節 單位 B if (bytes == 0) msg = "null"; //文件無效 else if (bytes > 1024 * 1024 * 4) // msg = "no"; //圖片不能大於4M Response.Write(msg); Response.End(); //停止該頁的執行
點擊注冊按鈕提交注冊信息。並完成注冊
<asp:Button ID="imgBtnReg" runat="server" onfocus="this.blur()" OnClientClick="return chk_reg();" OnClick="imgBtnReg_Click" Text="確認提交"/>
后台判斷驗證碼是否正確。錯誤。彈提示框。並刷新驗證碼
當刷新驗證碼時。有兩點要注意
1、因為這里是提交到iframe。所以刷新是調用父頁面的函數。所有要加parent。
2、開頭說了。頁面不是沒刷新。而是在iframe刷新。既然有刷新，驗證碼也會刷新。驗證碼的值是保存在服務端的session中。但剛剛驗證碼錯誤的時候。你也刷新了一次。那一共就是兩次。
因為是頁面先刷新（也就是我說的父頁面）parent.RefreshCode()，然后驗證碼圖片被顯示到頁面呈現在用戶前。驗證碼也保存在session中，繼而iframe跟着刷新。替換了之前躲在session中的值。這樣用戶看到的驗證碼。
跟藏在session中的值永遠不相等。可把我折騰了壞了。用return退出達不到目的，最后在刷新驗證碼后。Response.End();讓頁面中斷。iframe也就不會刷新。問題得到了解決。
Response.Write("<script>alert('驗證碼輸入錯誤')</script>"); //彈出提示框，提示驗證碼錯誤 Response.Write("<script>parent.RefreshCode()</script>"); //驗證碼輸入錯誤。回調。更新驗證碼 Response.End(); //這句話就阻止了iframe繼續刷新。頁面終止
當你注冊完成后需要跳轉頁面。記得parent
//因為是把form提交到iframe。此頁面為子頁面，所有這里需用parent。在父窗口打開鏈接 Response.Write("<script>parent.window.location.href('http://www.cnblogs.com')</script>"); //但這只支持IE中。FF Ch中得這樣，推薦這樣寫 有很多形式在IE中可行。不一定在其他瀏覽器中也能成功。這里沒有一一列出。 Response.Write("<script>parent.window.location.href='http://www.cnblogs.com'</script>");
擴展：html { overflow-x:hidden; }使iframe不顯示下面的滾動條
資源鏈接：完整版為官網下載:30KB。min版本是我去掉了以上這個程序不需要的代碼：9KB。加載時候可提高效率。
完整版：jquery.form.js下載
min版：jquery.form.min.js下載