DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JQuery插件ajaxfileupload.js異步上傳文件實例
JQuery插件ajaxfileupload.js異步上傳文件實例
編輯:JavaScript綜合知識     
這篇文章主要介紹了JQuery插件ajaxfileupload.js異步上傳文件實例,本文直接給出了HTML代碼和JS代碼以及後台處理代碼,需要的朋友可以參考下    

在服務器端做文件上傳的過程中,如果使用web服務器短端的上傳控件去上傳文件的話,會導致頁面刷新一次,這樣對用戶的體驗就不是很友好了。ajaxfileupload.js是一款jQuery的異步上傳文件插件,使用簡單且容易上手。

前置條件:ajaxfileupload.js文件,百度下載一個就行。

JS引用:

 代碼如下:
<script src="/Content/JQueryJS/jquery-2.1.1.js"></script>
<script src="/Content/Js/ajaxfileupload.js"></script>

 

html代碼:

 代碼如下:
<input id="fileToUpload" type="file" name="fileToUpload">
JS代碼:
 代碼如下:
function saveCInfo() {
var filename = document.getElementById("fileToUpload").value;
if (filename != "") {
$.ajaxFileUpload({
url: '../Order/OrderExec.ashx?oprMode=fileUpload' + "&filename=" + filename + "&billno=" + billno + "&companyname=" + companyname,
secureuri: false,
fileElementId: 'fileToUpload',//上傳控件ID
//dataType: 'json',
error: function () { alert('error'); },
success: function (datax) {
if (datax != "") {
msgShow('系統提示', '上傳成功!', 'info');
} else {
msgShow('系統提示', '上傳失敗!', 'info');
}
}
});
} else {
$.messager.alert('提示', '請選擇上傳文件', 'info');
}
}
後台代碼:

 

 

 代碼如下:
public void FileUpload(HttpContext context)
{
try
{
context.Response.ContentType = "text/html";
string companyname = context.Request.Params["companyname"];
string billno = context.Request.Params["billno"];
string filename = context.Request.Params["filename"];
string name = companyname + "_" + billno + "_" + filename;
HttpFileCollection files = HttpContext.Current.Request.Files;
//指定上傳文件在服務器上的保存路徑
string savePath = context.Server.MapPath("~/upload/");
//檢查服務器上是否存在這個物理路徑,如果不存在則創建
if (!System.IO.Directory.Exists(savePath))
{
System.IO.Directory.CreateDirectory(savePath);
}
savePath = savePath + name;//上傳文件路徑
files[0].SaveAs(savePath);//保存文件
context.Response.Write(savePath);
}
catch (Exception ex)
{
context.Response.Write("FileUpload: " + ex.Message);
}

 

}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved