iframe实现局部刷新和回调-- 文件上传

最新推荐文章于 2023-07-11 14:16:59 发布

ybhjx

最新推荐文章于 2023-07-11 14:16:59 发布

阅读量4.5k

点赞数

分类专栏： asp.net 文章标签： unity3d 用户体验表单

asp.net 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天做项目遇到一个问题。就是提交表单的时候，验证用户名是否存在和验证码是否正确。

当验证码或者用户名存在的时候。在后台弹窗提示。可页面原本file里面符合要求的值刷新没了。用户体验不好。因为用ifream刷新技术已不是什么新鲜技术。所以网上有大把的资料可参考。只是因为本人是初次接触。所以记下自己的知识点。当成长经历。对于入门的我们先来全名了解下。

什么是iframe

Iframe是Inline Frame的缩写，称为内联框架（即行内框架）。看着很眼熟吧，对了，它有个近亲可是大名鼎鼎的Frame（框架）标记。使用框架有两个缺点：占用了宝贵的显示面积、不利于保持网站整体风格。而使用Iframe则可以避免此类缺点。它可以在网页的局部插入另一个文件，更新时只要更改所插入的文件即可

Iframe标记格式使用：

id="ifr" src="http://www.cnblogs.com/" scrolling="yes" width="830" height="999">

　　src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
　　width、height：“画中画“区域的宽与高；
　　scrolling:当src的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
　　FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

iframe框架与form表单实例

我们经常做的是在页面放一个隐藏的iframe,然后把form的target属性指向iframe的name属性

<!--这里设置target="ajaxifr"，这样表单就提交到iframe里面了，和平时未设置target属性时默认提交到当前页面 -->
<iframe name="ajaxifr" runat="server" style="display:block;"></iframe>
<form method="post" runat ="server" enctype="multipart/form-data" action="check.ashx" target="ajaxifr" οnsubmit="return check()" >
    选择文件：<input type="file" name="upfile" /><br />
   <input type="submit" runat="server" value="提交" />
</form>

现在action的页面是子窗体，即check.ashx，from当前页面为父页面。

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

function msg()
{
   alert("回调");       
}
//通过parent访问父页面的函数。实现回调
Response.Write("<script>parent.msg()</script>");
//如果不想回调，只想弹窗，可以加parent也可以不加（因为弹窗会在顶层显示），其他的同理
Response.Write("<script>parent.alert('提示')</script>");
//重定向
Response.Write("<script>parent.window.location.href='http://www.cnblogs.com'</script>"); //记住：这里如果不用parent(主动权交给父页面)，那就会在iframe中打开网页，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//那当我们回调显示的时候。在前台就永远都不会看到跳转的页面。除非你要求在iframe中打开

最后附一个完整的实例。仅仅是图片上传并回调显示图片信息

index.aspx页面

 
    
  
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="tlxRegist.Test.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
   <script type="text/javascript">
       function UpdateMsg(des, filename) {//此函数用来提供给提交到的页面如upload.ashx输出js的回调，更新当前页面的信息
           if (filename == '') { alert('未上传文件！'); return false; }
           document.getElementById('ajaxMsg').innerHTML = '你在表单中输入的“文件描述”为：' + des + '<br/>'
     + '上传的图片为：<a href="uploads/' + filename + '" target="_blank">' + filename + '</a>';
       }

       function check(f) {
           if (f.des.value == '') {
               alert('请输入文件描述！'); f.des.focus(); return false;
           }
           if (f.upfile.value == '') {
               alert('请选择文件！'); f.upfile.focus(); return false;
           }
       }
   </script>
   <!--隐藏的iframe来接受表单提交的信息-->
   <iframe name="ajaxifr" style="display:none;"></iframe>
   <!--这里设置target="ajaxifr"，这样表单就提交到iframe里面了，和平时未设置target属性时默认提交到当前页面-->
   <!--注意一点的是使用iframe时在提交到的页面可以直接输出js来操作父页面的信息，一般的ajax提交文本信息时你需要返回信息，如果是js信息你还得eval下-->
   <form method="post" enctype="multipart/form-data" action="../upload.ashx" target="ajaxifr" οnsubmit="return check(this)">
   文件描述：<input type="text" name="des" /><br />
   选择文件：<input type="file" name="upfile" /><br />
   <input type="submit" value="提交" />
   </form>
   <!--放入此div用来实现上传的结果-->
   <div id="ajaxMsg">
   </div>

</body>
</html> 
    
  

upload.ashx处理程序

 
    
  
<%@ WebHandler Language="C#" Class="upload" %>

using System;
using System.Web;

public class upload : IHttpHandler {
   private string Js(string v)
   {//此函数进行js的转义替换的，防止字符串中输入了'后造成回调输出的js中字符串不闭合
       if (v == null) return "";
       return v.Replace("'", @"\'");
   }
   //下面就是一个简单的示例，保存上传的文件，如果要验证上传的后缀名，得自己写，还有写数据库什么的
   public void ProcessRequest(HttpContext context)
   {
       HttpRequest Request = context.Request;
       HttpResponse Response = context.Response;
       HttpServerUtility Server = context.Server;
       //指定输出头和编码
       Response.ContentType = "text/html";
       Response.Charset = "utf-8";

       HttpPostedFile f = Request.Files["upfile"];//获取上传的文件
       string des = Request.Form["des"]//获取描述
           , newFileName = Guid.NewGuid().ToString();//使用guid生成新文件名

       if (f.FileName == "")//未上传文件
           Response.Write("<script>parent.UpdateMsg('','');</script>");//输出js，使用parent对象得到父页的引用
       else
       { //保存文件
           newFileName += System.IO.Path.GetExtension(f.FileName);//注意加上扩展名
           try
           {
               f.SaveAs(Server.MapPath("~/uploads/" + newFileName));//如果要保存到其他地方，注意修改这里

               //调用父过程更新内容，注意要对des变量进行js转义替换，繁殖字符串不闭合提示错误
               Response.Write("<script>parent.UpdateMsg('" + Js(des) + "','" + newFileName + "')</script>");
           }
           catch
           {
               Response.Write("<script>alert('保存文件失败！\\n请检查文件夹是否有写入权限！');</script>");//如果保存失败，输出js提示保存失败
           }

       }
   }

   public bool IsReusable
   {
       get
       {
           return false;
       }
   }

} 
    
  

ybhjx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe实现局部刷新和回调-- 文件上传

今天做项目遇到一个问题。就是提交表单的时候，验证用户名是否存在和验证码是否正确。当验证码或者用户名存在的时候。在后台弹窗提示。可页面原本file里面符合要求的值刷新没了。用户体验不好。因为用ifream刷新技术已不是什么新鲜技术。所以网上有大把的资料可参考。只是因为本人是初次接触。所以记下自己的知识点。当成长经历。对于入门的我们先来全名了解下。什么是iframeIframe
复制链接

扫一扫