标签：
记得刚离开大学，进入目前这家公司不到一个月时，有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识。
在此之前，一直都是在使用C#提供的服务器上传控件FileUpload，但是每次使用时，都会刷新一次页面，给人的感觉不是太好。但是那是，并不是太在意这个细节，而且JS知识非常匮乏，所以并没有去找解决的办法。
当时，这位前辈提到的一种方法是：
准备一个主页面（用户界面）和一个上传页（放在主页面隐藏的iframe中，作为真正意义的上传页），当点击主页面的上传按钮时，实际上是调用了上传页的上传控件，从而来实现上传。而这个套操作并不是没有刷新，只是刷新是在上传页完成的，用户感觉不到罢了。
这个原理其实就是，一个iframe+一个form+一个上传控件，上传实际上是在提交iframe下的form，上面这个方法，需要用到的iframe、form和上传控件都是事先写好，存在一个实际的页面中。
通过之前在网上所了解的，我们可以利用JS或jQuery动态的创建iframe、form和上传控件。
步骤如下：
1、创建一个iframe，添加到文档中
1 var iframe = $("<iframe src=‘javascript:false;‘ id=‘" + id + "‘ name=‘" + id + "‘ border=‘none‘ width=‘0‘ height=‘0‘></iframe>").appendTo(document.body)[0];
2 $(iframe).attr("onload", "IframeLoad(‘" + id + "‘, ‘" + this._imgpanel + "‘)");
2、创建一个form，添加到文档中，并将其target属性指向上面创建的iframe
1 var form = $("<form id=‘" + id + "‘ name=‘" + id + "‘ action=‘" + this._url + "‘ method=‘POST‘ enctype=‘multipart/form-data‘></form>").appendTo(document.body)[0]; 2 form.target = iframe.name;
3、创建一个上传控件，添加到上面这个form中
1 this._control = $("<input type=‘file‘ id=‘" + id + "‘ name=‘" + id + "‘ style=‘ filter: alpha(opacity=100);‘ />"); 2 this._control.appendTo(form); 3 this._control.attr("onchange", "fileChangeHandler(this,‘" + form.id + "‘,‘" + id + "‘)");
4、实现这个上传控件的onchange事件，已完成上传
1 var fileChangeHandler = function (obj, formid, fupid) { 2 ///<summary>选择完文件后，自动上传</summary> 3 $("#" + formid).submit(); 4 };
5、提交后需要后台接收并完成上传。由于本人主要是C#开发，这里就给个C#的上传代码（擅长其他编程语言的，可以用自己方式）。首先建一个一般处理程序handler.ashx，然后获取提交的文件，最后实现上传并返回重要信息。
1 Request = context.Request; 2 //获取上传到服务器的文件集合 3 HttpFileCollection files = Request.Files;//要配置httpRuntime节点的maxRequestLength属性为较大值，否则过大的文件无法上传而引发异常 4 string newfilepath = ""; 5 if (files.Count > 0) 6 { 7 string path = Server.MapPath("upfiles/"); 8 if (!Directory.Exists(path)) 9 { 10 Directory.CreateDirectory(path); 11 } 12 HttpPostedFile file = files[0]; 13 string newfilename = DateTime.Now.ToString("yyyyMMddHHmmdd") + Path.GetExtension(file.FileName); 14 file.SaveAs(path + newfilename); 15 newfilepath = "upfiles/" + newfilename; 16 }
17 18 Response.Write(newfilepath); 19 Response.End();
6、前台接收返回消息的方法如下
1 var msg = $("#" + iframeid)[0].contentDocument.body.innerHTML;
注：iframeid为创建的iframe的id。后台返回的消息会显示到这个iframe的body里面，这里就只需要抓取到这个值就行了。
具体实现我放在一个Demo里面，有兴趣的园友可以下载下来阅示，如有不足之处，还望能批评斧正。
感谢！
http://files.cnblogs.com/files/jijiexuanfeng/JsNoRefresh.rar
标签：
原文地址：http://www.cnblogs.com/jijiexuanfeng/p/4436283.html
