做項目的時候遇到了這樣一個問題,如果用普通的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上傳文件，頁面不會刷新，有需要的試試吧。