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部分的内容。
