Ajax 与 ashx 实现无刷新同步上传

时间：2010-10-02 来源：gdutlab624

<!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>    <script type="text/javascript">    function UpdateMsg(filename)    {       //此函数用来提供给提交到的页面如upload.ashx输出js的回调，更新当前页面的信息      if(filename=='')      {        alert('未上传文件！');        return false;      }      document.getElementById('ajaxMsg').innerHTML='上传的图片为：<a href="../uploadfile/'+filename+'" target="_blank">'+filename+'</a>';    }      function check(f) {    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下,action代表浏览者输入的数据被传送到的地方-->    <form method="post" enctype="multipart/form-data" action="../cs/Handler.ashx" target="ajaxifr" onsubmit="return check(this)">    <!--Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型-->        选择文件：<input type="file" name="upfile" /><br />    <input type="submit" value="提交" />    </form>    <!--放入此div用来实现上传的结果-->    <div id="ajaxMsg"></div></body></html>

by——达森（sam.黄）

由于我们现在用着的上传功能都是在html页面安置一个按钮，然后跳到aspx页面，再通过aspx的服务器控件实现附件的上传，这就出现了许多问题。假如发布的培训信息包含附件，因为上传的附件一般放在服务器，而发布的消息则存在数据库，数据库里存放的只是附件在服务器的路径，所以上传则必须先于发布培训信息，上传成功后，返回路径再存放在数据库，所以如果上传成功，而发布消息失败时，服务器就多一个没用的文件，长此以往，服务器积累的无用文件将越来越多......一直以来哥苦苦寻找解决的方法，上网找了很多资料，也请教过很多同学，现在已经实现了不用服务器控件上传，通过html的js代码和后台的cs代码即可。但是也仍有很多缺陷，具体代码如下，代码解释也写得比较详细了，有兴趣的同学可以跟哥一起研究。

upload.html

Handler.ashx

代码

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

using System;
using System.Web;

public class Handler : IHttpHandler 
{

   
    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  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("~/uploadfile/" + newFileName));//如果要保存到其他地方，注意修改这里

                //调用父过程更新内容
                Response.Write("<script>parent.UpdateMsg('" + newFileName + "')</script>");
            }
            catch
            {
                Response.Write("<script>alert('保存文件失败！\\n请检查文件夹是否有写入权限！');</script>");//如果保存失败，输出js提示保存失败
            }

        }
    } 
     // 这是每个IHttpHandler类都必须实现的函数，表示得到的结果能否再次使用，true表示可以重用，false表示不行         public bool IsReusable     {
        get 
        {
            return false;
        }
    }

}