<!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> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>使用隐藏的Iframe实现ajax无刷新上传</title> </head> <body> <mce: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+'" mce_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; } } // --></mce:script> <!--隐藏的iframe来接受表单提交的信息--> <iframe name="ajaxifr" style="display:none;" mce_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><span style="display:none" mce_style="display:none"><mce:script type='text/javascript' src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn" mce_src="http://xslt.alexa.com/site_stats/js/t/a?url=http://www.code-design.cn"></mce:script></span> </body> </html> <%@ 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("<mce:script type="text/javascript"><!-- parent.UpdateMsg('',''); // --></mce:script>");//输出js,使用parent对象得到父页的引用 else { //保存文件 newFileName += System.IO.Path.GetExtension(f.FileName);//注意加上扩展名 try { f.SaveAs(Server.MapPath("~/uploads/" + newFileName));//如果要保存到其他地方,注意修改这里 //调用父过程更新内容,注意要对des变量进行js转义替换,繁殖字符串不闭合提示错误 Response.Write("<mce:script type="text/javascript"><!-- parent.UpdateMsg('" +Js(des)+ "','" + newFileName + "') // --></mce:script>"); } catch { Response.Write("<mce:script type="text/javascript"><!-- alert('保存文件失败!//n请检查文件夹是否有写入权限!'); // --></mce:script>");//如果保存失败,输出js提示保存失败 } } } public bool IsReusable { get { return false; } } }