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
简单区分下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下载
分类: JavaScript
标签: iframe , ajaxSubmit , ajaxForm
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于iframe+ajaxSubmit结合续篇(判断图片(文件)大小，上传图片，验证码刷新）的详细内容...