利用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]
//執(zhí)行AJAX上傳文件
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
alert(data[0]);
}
});
//執(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]
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上傳文件，頁面不會刷新，有需要的試試吧。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)漫畫中大雨滂沱的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
js實現(xiàn)web調(diào)用攝像頭 js截取視頻畫面
這篇文章主要為大家詳細(xì)介紹了JS web調(diào)用攝像頭，截取視頻畫面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
今天小編就為大家分享一篇Layer+Echarts構(gòu)建彈出層折線圖的方法，具有很的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
node.js chat程序如何實現(xiàn)Ajax long-polling長鏈接刷新模式
node.js chat是node.js作者用JS寫的一個多人聊天工具， 源代碼公開下載，網(wǎng)址是chat.nodejs.org。作者用這個小例子，來展示如何用nodejs開發(fā)高效率的應(yīng)用程序。對于nodejs的學(xué)習(xí)者來說，是一個很好的例子2012-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄（模板化），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細(xì)介紹了javaScript日期工具類DateUtils，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
第一次接觸神奇的Bootstrap表單，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript中fromCharCode 和 fromCodePoint 的詳解與應(yīng)
本文將詳細(xì)介紹 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,這兩個方法能夠幫助開發(fā)者高效地處理字符與編碼之間的轉(zhuǎn)換,理解它們的區(qū)別與應(yīng)用,將讓你的代碼更加靈活和高效,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要給大家介紹了關(guān)于JS數(shù)組去重的九種高階方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JavaScript 調(diào)試器其實有很多。當(dāng)然這些僅僅是調(diào)試器而已，與流行的 Java IDE 是沒有辦法相提并論的。2009-02-02