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