正文

记得刚离开大学，进入目前这家公司不到一个月时，有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识。

在此之前，一直都是在使用C#提供的服务器上传控件FileUpload，但是每次使用时，都会刷新一次页面，给人的感觉不是太好。但是那是，并不是太在意这个细节，而且JS知识非常匮乏，所以并没有去找解决的办法。

当时，这位前辈提到的一种方法是：

准备一个主页面（用户界面）和一个上传页（放在主页面隐藏的iframe中，作为真正意义的上传页），当点击主页面的上传按钮时，实际上是调用了上传页的上传控件，从而来实现上传。而这个套操作并不是没有刷新，只是刷新是在上传页完成的，用户感觉不到罢了。

这个原理其实就是，一个iframe+一个form+一个上传控件，上传实际上是在提交iframe下的form，上面这个方法，需要用到的iframe、form和上传控件都是事先写好，存在一个实际的页面中。

通过之前在网上所了解的，我们可以利用JS或jQuery动态的创建iframe、form和上传控件。

步骤如下：

1、创建一个iframe，添加到文档中

1 var iframe = $("<iframe src='javascript:false;'></iframe>").appendTo(document.body)[0];
2 $(iframe).attr("onload", "IframeLoad('" + id + "', '" + this._imgpanel + "')");

2、创建一个form，添加到文档中，并将其target属性指向上面创建的iframe

1 var form = $("<form 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' />"); 2 this._control.appendTo(form); 3 this._control.attr("onchange", "fileChangeHandler(this,'" + form.id + "','" + id + "')");

4、实现这个上传控件的onchange事件，已完成上传

1 var fileChangeHandler = function (obj, formid, fupid) { $("#" + formid).submit(); 4 };

5、提交后需要后台接收并完成上传。由于本人主要是C#开发，这里就给个C#的上传代码（擅长其他编程语言的，可以用自己方式）。首先建一个一般处理程序handler.ashx，然后获取提交的文件，最后实现上传并返回重要信息。

1 　　　　 Request = context.Request; HttpFileCollection files = Request.Files;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; Response.Write(newfilepath); 19 Response.End();

6、前台接收返回消息的方法如下

1 var msg = $("#" + iframeid)[0].contentDocument.body.innerHTML;

注：iframeid为创建的iframe的id。后台返回的消息会显示到这个iframe的body里面，这里就只需要抓取到这个值就行了。

具体实现我放在一个Demo里面，有兴趣的园友可以下载下来阅示，如有不足之处，还望能批评斧正。

感谢！