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

  人们似乎慢慢遗忘了iframe。毕竟在ajax未诞生前。都是用iframe来实现无刷新的效果。当请教iframe实现无刷新知识时。他们说从来没用过。iframe是什么？。无奈。只有自己摸索，毕竟我属入门级别。下面的方法从效率上好不好。我也说不清。

已有的用户注册表单，现优化实现如下功能

  • 用户选择图片及时判断图片大小，不符合的话清空value
  • 点提交按钮判断验证码是否正确。页面不能刷新，且要保证符合要求的file的vlaue存在。因为只要页面不刷新。value的值就会存在

思路:

  • 因为file是Readonly，想清空value。只能用新的file替换之前的file
  • 想页面不刷新。首选当然是ajax请求，给每个file注册onchang事件

我们可以动态给每个file注册onchang事件，我这里用live代替bind。它的好处是。在页面加载完成后添加的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=' 259px' id='file" + new Date().getMilliseconds() + "' name='file' onchange='fileEven(this)'/>");
                    return;
                } else if (data == "null") {
                    alert("图片无效！");
                    file.parent().html("<input type='file' style=' 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=' 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下载

作者： nsky
出处： http://nsky.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，共同学习；共同进步；但不能乱搞！
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/nsky/p/2836578.html