利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無(wú)刷新的具體方法
做項(xiàng)目的時(shí)候遇到了這樣一個(gè)問(wèn)題,如果用普通的ASP.NET FileUpload控件實(shí)現(xiàn)文件上傳,那么頁(yè)面會(huì)刷新,那么頁(yè)面上用JS拼出的元素就會(huì)消失,為了上傳文件,又不能刷新頁(yè)面,ajaxfileupload插件是一個(gè)很好的選擇(插件下載地址://img.jbzj.com/file_images/article/201306/js/ajaxfileupload.js)
ajaxfileupload是jQuery的一個(gè)插件,使用這個(gè)插件同時(shí)要引用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]);
}
});
說(shuō)明:
1.這個(gè)方法很像大家熟知的$.ajax方法
2.參數(shù)說(shuō)明
url：AJAX的后臺(tái)代碼文件，要接收前臺(tái)傳來(lái)的文件數(shù)據(jù)
secureuri：是否對(duì)上傳的文件加密
fileElementId：HTML中<input type="file"/>上傳控件的Id值，這里需要注意的是，后臺(tái)代碼是通過(guò)name-value的形式接收數(shù)據(jù)的，所以后臺(tái)代碼是通過(guò)name來(lái)接收數(shù)據(jù)的，而不是Id（根本原因是，這個(gè)方法會(huì)自動(dòng)生成一個(gè)表單，將表單提交給后臺(tái)代碼處理）。
dataType：數(shù)據(jù)類型，一般是‘json'
success：上傳成功后執(zhí)行的回調(diào)函數(shù)
ASP.NET一般處理程序中的代碼
[csharp]
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";//這里很關(guān)鍵，雖然前臺(tái)數(shù)據(jù)類型是json，但這里一定要寫(xiě)html
//獲取前臺(tái)傳來(lái)的文件
HttpFileCollection files = HttpContext.Current.Request.Files;
//將文件保存在網(wǎng)站目錄中
files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
//返回用json數(shù)據(jù)格式表示的提示
string result = "[" + "\"" + "成績(jī)導(dǎo)入成功" + "\"" + "]";
context.Response.Write(result);
}
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";//這里很關(guān)鍵，雖然前臺(tái)數(shù)據(jù)類型是json，但這里一定要寫(xiě)html
//獲取前臺(tái)傳來(lái)的文件
HttpFileCollection files = HttpContext.Current.Request.Files;
//將文件保存在網(wǎng)站目錄中
files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
//返回用json數(shù)據(jù)格式表示的提示
string result = "[" + "\"" + "成績(jī)導(dǎo)入成功" + "\"" + "]";
context.Response.Write(result);
}
這樣就實(shí)現(xiàn)了AJAX上傳文件，頁(yè)面不會(huì)刷新，有需要的試試吧。
- ajax實(shí)現(xiàn)異步文件或圖片上傳功能
- 基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
- 使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
- ajaxFileUpload.js插件支持多文件上傳的方法
- ajax(iframe)無(wú)刷新提交表單、上傳文件
- ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
- AJAX和JSP實(shí)現(xiàn)的基于WEB的文件上傳的進(jìn)度控制代碼
- Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
- ajax上傳多圖到php服務(wù)器的方法
相關(guān)文章
本文主要介紹了面試常見(jiàn)的js算法題。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
詳解vue.js根據(jù)不同環(huán)境(正式、測(cè)試)打包到不同目錄
這篇文章主要介紹了詳解vue.js根據(jù)不同環(huán)境(正式、測(cè)試)打包到不同目錄，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
讓背景如此暗淡（一種彈出提示信息時(shí)頁(yè)面背景色調(diào)改變的方法）
讓背景如此暗淡（一種彈出提示信息時(shí)頁(yè)面背景色調(diào)改變的方法）...2006-10-10
這篇文章主要介紹了JSONP 的原理、理解與實(shí)例,結(jié)合實(shí)例形式分析了JSONP 的基本概念、原理、理解與使用技巧,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了小米公司JavaScript面試題的個(gè)人解題方法,需要的朋友可以參考下2014-12-12
JS實(shí)現(xiàn)的走迷宮小游戲完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的走迷宮小游戲,涉及javascript鍵盤(pán)事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
javascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】
javascript下數(shù)值型比較難點(diǎn)說(shuō)明