ajax 无刷新上传

最近要做微信的图文上传，因为一个图文了表中可以有多个图文，所有按钮需要随时添加，所以做了一种无刷新上传的方法。

首先我们要在html页面中写上这样的几段代码

javascript：

 $(function () {
    　　　　//这个是为了绑定我们所有的上传按钮，包括动态添加的按钮
            $(document).on("change", ".filebutton", function () {
                $(this).parent().children("span").html('开始上传中....');
                $(this).parent().submit();
            });
        })
　　　　//这个方法是为了让iframe中的页面调用修改本页内容的方法（可以根据自己需要修改）
        function uploadSuccess(msg) {
            var info = msg.split('|');
            var _from = $("#" + info[2] + "_ts");
            _from.html(info[0]);
            if (info[1] != "") {
                _from.append("<a href='uplod/" + info[1] + "' target="_blank" imgurl="" + info[1] + "">查看图片</a>");
            }
            else {
                _from.append("<a imgurl=""></a>");
            }
        }

html

 <form method="post" action="../ajax/Upload.ashx?id=boximg" target='boximg_f'  enctype="multipart/form-data"><!--这里用到了target属性来指向下面的iframe让页面在iframe中刷新-->
       <input class="filebutton" type="file" id="boximg" name="fileUp" />
       <span id="boximg_ts" runat="server" class="help-inline">上传的文件不能大于500KB</span>
 </form>

<!--这里隐藏这个iframe让别人看不出来刷新的效果-->
 <iframe id="boximg_f" name="boximg_f" style="display:none;"></iframe>

 然后我们需要建立这个Upload.ashx文件来接收post过来的文件数据

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Net;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using WeiXinHaiBLL;

namespace WeiXinHai.ajax
{
    /// <summary>
    /// Upload 的摘要说明
    /// </summary>
    public class Upload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //string fname = context.Request.QueryString["op"].ToString();
            //string str =fname+"({name:'judy',age:'23'})";

            string id = context.Request.QueryString["id"];
            try
            {
                //获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件
                string file1 = "";
                if (id == "citu")
                {
                    file1 = "fileUps";
                }
                else
                { file1 = "fileUp"; }
                HttpPostedFile file = context.Request.Files[file1];
                if (file != null)
                {
                    //当前文件后缀名
                    string ext = Path.GetExtension(file.FileName).ToLower();
                    //验证文件类型是否正确
                    if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
                    {
                        //ajax/uplodereturn.html
                        //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                        context.Response.Redirect("uplodereturn.html?error=fileerror&id=" + id, false);
                        return;
                    }
                    //验证文件的大小
                    if (file.ContentLength > (1024 * 500))
                    {
                        //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                        context.Response.Redirect("uplodereturn.html?error=tobig&id=" + id, false);
                        return;
                    }
                    FileInfo files = new FileInfo(file.FileName);

                    //当前文件上传的目录
                    string serverPath = System.Web.HttpContext.Current.Server.MapPath("~");
                    string selfPath = "images\uplod\";
                 
                    //当前待上传的服务端路径
                    string toFilePath = Path.Combine(serverPath, selfPath);
                    //生成将要保存的随机文件名
                    string fileName = GetImageName() + ext;
                    //获得要保存的文件路径
                    string serverFileName = toFilePath + fileName;

                    //物理完整路径                    
                    string toFileFullPath = serverFileName; //HttpContext.Current.Server.MapPath(toFilePath);

                    //将要保存的完整文件名                
                    string toFile = toFileFullPath;//+ fileName;

                    context.Request.Files[0].SaveAs(toFile);

                    //开始上传
                    //file.SaveAs(imageUrl);
                    //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                    //如果成功返回的数据是需要返回两个字符串，我在这里使用了|分隔  例： 成功信息|/Test/hello.jpg
                    context.Response.Redirect("uplodereturn.html?type=" + fileName + "&id=" + id, false);
                    return;
                }
                else
                {
                    //上传失败
                    context.Response.Redirect("uplodereturn.html?r=a&id=" + id, false);
                    return;
                }
            }
            catch (Exception ex)
            {
                //上传失败
                context.Response.Redirect("uplodereturn.html?r=a&id=" + id, false);
                return;
            }
            //context.Response.Write("hello word")
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        #region Private Methods
        /// <summary>
        /// 检查是否为合法的上传图片
        /// </summary>
        /// <param name="_fileExt"></param>
        /// <returns></returns>
        private bool CheckImageExt(string _ImageExt)
        {
            string[] allowExt = new string[] { ".jpg", ".png", ".bmp", ".gif", ".pdf", ".jpeg", };
            for (int i = 0; i < allowExt.Length; i++)
            {
                if (allowExt[i] == _ImageExt) { return true; }
            }
            return false;

        }

        private string GetImageName()
        {
            Random rd = new Random();
            StringBuilder serial = new StringBuilder();
            serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
            serial.Append(rd.Next(0, 999999).ToString());
            return serial.ToString();

        }

        #endregion
    }
}

剩下的我们就要新建一个用来调用ifarme父级uploadSuccess方法的页面uplodereturn.html

这个页面要和上面的一般处理程序在一个文件夹内

<!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>
    <title></title>
    <script>
        var url = window.location.search;
        if (url.indexOf("?") != -1) {
            var strurl = url.substr(1)
            strs = strurl.split("&");
            var returntype = '';
            if ([strs[0].split("=")[0]] == 'type') {
                returntype = "上传成功|" + unescape(strs[0].split("=")[1]);
                //window.parent.uploadSuccess("上传成功|" + unescape(strs[0].split("=")[1]));
            }
            else if ([strs[0].split("=")[0]] == 'error') {
                returntype = (unescape(strs[0].split("=")[1]) == "fileerror" ? "文件格式错误" : "上传文件过大，请重新上传！") + "|";
                //window.parent.uploadSuccess(unescape(strs[0].split("=")[1]));
            }
            if (strs[1].split("=")[0] == 'id') {
                returntype += "|" + unescape(strs[1].split("=")[1]);
            }
            window.parent.uploadSuccess(returntype);
        }
    </script>
</head>
<body>
</body>
</html>

然后大功告成，我们添加的时候需要添加上最上面的html代码中的form部分就可以了

这里的原理是用from 的target 来让这个from的刷新过程在iframe中进行，这样的话我们隐藏掉iframe的时候就看不出页面的刷新效果

同时我们又在这个新建的html中拼写好我们想要的参数调用父级写好的方法，然后达到更改页面的效果。

这里我的方法是修改了span部分的内容。