jQuery無刷新上傳學習心得

記得剛離開大學，進入目前這家公司不到一個月時，有一位前輩給咱們當時的新人講了下JS無刷新上傳的相關知識。

在此以前，一直都是在使用C#提供的服務器上傳控件FileUpload，可是每次使用時，都會刷新一次頁面，給人的感受不是太好。可是那是，並非太在乎這個細節，並且JS知識很是匱乏，因此並無去找解決的辦法。

當時，這位前輩提到的一種方法是：

準備一個主頁面（用戶界面）和一個上傳頁（放在主頁面隱藏的iframe中，做爲真正意義的上傳頁），當點擊主頁面的上傳按鈕時，其實是調用了上傳頁的上傳控件，從而來實現上傳。而這個套操做並非沒有刷新，只是刷新是在上傳頁完成的，用戶感受不到罷了。

這個原理其實就是，一個iframe+一個form+一個上傳控件，上傳其實是在提交iframe下的form，上面這個方法，須要用到的iframe、form和上傳控件都是事先寫好，存在一個實際的頁面中。

經過以前在網上所瞭解的，咱們能夠利用JS或jQuery動態的建立iframe、form和上傳控件。

步驟以下：

一、建立一個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 + "')");

二、建立一個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;

三、建立一個上傳控件，添加到上面這個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 + "')");

四、實現這個上傳控件的onchange事件，已完成上傳

1 var fileChangeHandler = function (obj, formid, fupid) {
2     ///<summary>選擇完文件後，自動上傳</summary>
3     $("#" + formid).submit();
4 };

五、提交後須要後臺接收並完成上傳。因爲本人主要是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();

六、前臺接收返回消息的方法以下

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

注：iframeid爲建立的iframe的id。後臺返回的消息會顯示到這個iframe的body裏面，這裏就只須要抓取到這個值就好了。

 

具體實現我放在一個Demo裏面，有興趣的園友能夠下載下來閱示，若有不足之處，還望能批評斧正。

感謝！

 http://files.cnblogs.com/files/jijiexuanfeng/JsNoRefresh.rar