您的位置：首页 > 其它

iframe+ajaxSubmit结合--续篇(判断图片(文件)大小，上传图片，验证码刷新）

2012-12-30 12:20 603 查看

人们似乎慢慢遗忘了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" >


提供一张表单属性图

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下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航