你的位置:首页 > Java教程

[Java教程]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