人们似乎慢慢遗忘了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简单区分下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配置文件上限
1 <!--设置最大上传文件，单位KB、此处设置的为25M--> 2 <httpRuntime maxRequestLength="25600" 3 useFullyQualifiedRedirectUrl="true" 4 executionTimeout="6000" 5 minFreeThreads="8" 6 minLocalRequestFreeThreads="4" 7 appRequestQueueLimit="100" 8 enableVersionHeader="true" 9 />
提交。在后台接收并判断
//判断图片的大小 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()，然后验证码图片被显示到页面呈现在用户前。继而iframe跟着刷新。替换了之前躲在session中的值。这样用户看到的验证码。
跟藏在session中的值永远不相等。可把我折腾了坏了。用return退出达不到目的，最后在刷新验证码后。Response.End();问题得到了解决。
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>");
资源链接：jquery.form.js下载