当验证码或者用户名存在的时候。在后台弹窗提示。可页面原本file里面符合要求的值刷新没了。用户体验不好。因为用ifream刷新技术已不是什 么新鲜技术。所以网上有大把的资料可参考。只是因为本人是初次接触。所以记下自己的知识点。当成长经历。对于入门的我们先来全名了解下。
什么是iframe
Iframe是Inline Frame的缩写,称为内联框架(即行内框架)。看着很眼熟吧,对了,它有个近亲可是大名鼎鼎的Frame(框架)标记。使用框架有两个缺点:占用了宝贵 的显示面积、不利于保持网站整体风格。而使用Iframe则可以避免此类缺点。它可以在网页的局部插入另一个文件,更新时只要更改所插入的文件即可
Iframe标记格式使用:
src:文件的路径,既可是HTML文件,也可以是文本、ASP等;
width、height:“画中画“区域的宽与高;
scrolling:当src的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示;
FrameBorder:区域边框的宽度,为了让“画中画“与邻近的内容相融合,常设置为0。iframe框架与form表单实例
我们经常做的是在页面放一个隐藏的iframe,然后把form的target属性指向iframe的name属性
选择文件:
现在action的页面是子窗体,即check.ashx,from当前页面为父页面。
在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。
在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。
function msg()
{
alert("回调");
}
//通过parent访问父页面的函数。实现回调
Response.Write("");
//如果不想回调,只想弹窗,同样也只要加parent,其他的同理
Response.Write("");
//重定向
Response.Write(""); //记住:这里如果不用parent(主动权交给父页面),那就会在iframe中打开网页,
//那当我们回调显示的时候。在前台就永远都不会看到跳转的页面。除非你要求在iframe中打开
最后附一个完整的实例。图片上传并回调显示。网上整理
//前端
function UpdateMsg(des, filename) {//此函数用来提供给提交到的页面如upload.ashx输出js的回调,更新当前页面的信息
if (filename == '') { alert('未上传文件!'); return false; }
document.getElementById('ajaxMsg').innerHTML = '你在表单中输入的“文件描述”为:' + des + '
'
+ '上传的图片为:' + filename + '';
}
文件描述:
选择文件:
//后端 upload.ashx
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("");//输出js,使用parent对象得到父页的引用
else { //保存文件
newFileName += System.IO.Path.GetExtension(f.FileName);//注意加上扩展名
try {
f.SaveAs(Server.MapPath("~/uploads/" + newFileName));//如果要保存到其他地方,注意修改这里
//调用父过程更新内容,注意要对des变量进行js转义替换,防止字符串不闭合提示错误
Response.Write("");
}
catch {
Response.Write("");//如果保存失败,输出js提示保存失败
}
}
}
public bool IsReusable {
get {
return false;
}
}
}