iframe+ajaxSubmit结合--续篇(判断图片(文件)大小，上传图片，验证码刷新）
人们似乎慢慢遗忘了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下载