利用ajaxfileupload外掛實現文件上傳無刷新的具體方法

利用ajaxfileupload外掛實現文件上傳無刷新的具體方法_javascript技巧

WBOY

發布： 2016-05-16 17:32:24

原創

1426 人瀏覽過

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

ajaxfileupload是jQuery的一個插件,使用這個插件同時要引用jQuery.js檔案

直接上程式碼吧

JS代碼

[javascript]

複製程式碼程式碼如下:

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

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

}
});

說明:

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

2.參數說明

url：AJAX的後台程式碼文件，要接收前台傳來的文件資料

secureuri：是否加密

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

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

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

ASP.NET一般處理程序中的程式碼

[csharp]複製程式碼

程式碼如下:

    context.Response.ContentType = "text/html";//這裡很關鍵，雖然前台資料類型是json，但這裡一定要寫html
    //取得前台傳來的檔案
HttpFileCollection files = 網站目錄);
    //傳回以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(conPath.Server.Map("/ Web/uploadFiles/Achievements.xls"));
//返回以json資料格式表示的提示
string result = "[" """ "成績匯入成功" """ "]";
context.Response.Write(result);

}

這樣就實作了AJAX上傳文件，頁面不會刷新，有需要的試試看。