利用ajaxfileupload插件實現(xiàn)文件上傳無刷新的具體方法

更新時間：2013年06月08日 10:57:57 作者：

利用ajaxfileupload插件實現(xiàn)文件上傳無刷新的具體方法，需要的朋友可以參考一下

做項目的時候遇到了這樣一個問題,如果用普通的ASP.NET FileUpload控件實現(xiàn)文件上傳,那么頁面會刷新,那么頁面上用JS拼出的元素就會消失,為了上傳文件,又不能刷新頁面,ajaxfileupload插件是一個很好的選擇(插件下載地址://img.jbzj.com/file_images/article/201306/js/ajaxfileupload.js)

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

直接上代碼吧

JS代碼

[javascript]

復(fù)制代碼代碼如下:

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

說明:

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

2.參數(shù)說明

url：AJAX的后臺代碼文件，要接收前臺傳來的文件數(shù)據(jù)

secureuri：是否對上傳的文件加密

fileElementId：HTML中<input type="file"/>上傳控件的Id值，這里需要注意的是，后臺代碼是通過name-value的形式接收數(shù)據(jù)的，所以后臺代碼是通過name來接收數(shù)據(jù)的，而不是Id（根本原因是，這個方法會自動生成一個表單，將表單提交給后臺代碼處理）。

dataType：數(shù)據(jù)類型，一般是‘json'

success：上傳成功后執(zhí)行的回調(diào)函數(shù)

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

[csharp]

復(fù)制代碼代碼如下:

public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/html";//這里很關(guān)鍵，雖然前臺數(shù)據(jù)類型是json，但這里一定要寫html
    //獲取前臺傳來的文件
    HttpFileCollection files = HttpContext.Current.Request.Files;
    //將文件保存在網(wǎng)站目錄中
    files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
    //返回用json數(shù)據(jù)格式表示的提示
    string result = "[" + "\"" + "成績導(dǎo)入成功" + "\"" + "]";
    context.Response.Write(result);

}

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";//這里很關(guān)鍵，雖然前臺數(shù)據(jù)類型是json，但這里一定要寫html
//獲取前臺傳來的文件
HttpFileCollection files = HttpContext.Current.Request.Files;
//將文件保存在網(wǎng)站目錄中
files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
//返回用json數(shù)據(jù)格式表示的提示
string result = "[" + "\"" + "成績導(dǎo)入成功" + "\"" + "]";
context.Response.Write(result);

}

這樣就實現(xiàn)了AJAX上傳文件，頁面不會刷新，有需要的試試吧。

您可能感興趣的文章: