jQuery无刷新上传学习心得

记得刚离开大学，进入目前这家公司不到一个月时，有一位前辈给我们当时的新人讲了下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

秒客网

jQuery无刷新上传学习心得

相关文章