利用ajaxfileupload外掛程式實現檔案上傳無重新整理的具體方法

 做項目的時候遇到了這樣一個問題,如果用普通的ASP.NET FileUpload控制項實現檔案上傳,那麼頁面會重新整理,那麼頁面上用JS拼出的元素就會消失,為了上傳檔案,又不能重新整理頁面,ajaxfileupload外掛程式是一個很好的選擇(外掛程式:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js)

ajaxfileupload是jQuery的一個外掛程式,使用這個外掛程式同時要引用jQuery.js檔案

直接上代碼吧

JS代碼

[javascript]
複製代碼 代碼如下:
//執行AJAX上傳檔案 
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
    alert(data[0]);
}
});

 //執行AJAX上傳檔案
 $.ajaxFileUpload({
 url: '/Web/Teacher/ImportAchievements.ashx',
 secureuri: false,
 fileElementId: 'fulAchievements',
 dataType: 'json',
 success: function (data, status) {
  alert(data[0]);
 }
 });

說明:

1.這個方法很像大家熟知的$.ajax方法

2.參數說明

url：AJAX的後台代碼檔案，要接收前台傳來的檔案資料

secureuri：是否對上傳的檔案加密

fileElementId：HTML中<input type="file"/>上傳控制項的Id值，這裡需要注意的是，後台代碼是通過name-value的形式接收資料的，所以後台代碼是通過name來接收資料的，而不是Id（根本原因是，這個方法會自動產生一個表單，將表單提交給後台代碼處理）。

dataType：資料類型，一般是‘json'

success：上傳成功後執行的回呼函數

ASP.NET一般處理常式中的代碼

[csharp]
複製代碼 代碼如下:
public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/html";//這裡很關鍵，雖然前台資料類型是json，但這裡一定要寫html 
    //擷取前台傳來的檔案 
    HttpFileCollection files = HttpContext.Current.Request.Files;
    //將檔案儲存在網站目錄中 
    files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
    //返回用json資料格式表示的提示 
    string result = "[" + "\"" + "成績匯入成功" + "\"" + "]";
    context.Response.Write(result);

}

public void ProcessRequest (HttpContext context) {
 context.Response.ContentType = "text/html";//這裡很關鍵，雖然前台資料類型是json，但這裡一定要寫html
 //擷取前台傳來的檔案
 HttpFileCollection files = HttpContext.Current.Request.Files;
 //將檔案儲存在網站目錄中
 files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
 //返回用json資料格式表示的提示
 string result = "[" + "\"" + "成績匯入成功" + "\"" + "]";
 context.Response.Write(result);

}

這樣就實現了AJAX上傳檔案，頁面不會重新整理，有需要的試試吧。