使用Ajax和一般處理程序實現文件上傳與下載
1.使用HTML的input標簽
<input type="file" multiple="multiple" id="file_load" />
2.使用JS為input的file添加一個change事件
$(‘#file_load‘).change(function () {
var fileObj = document.getElementById("file_load").files; // js 獲取文件對象
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
return;
}
if (fileObj.length > 10) { //因本人項目需求、一次最多上傳的文件個數不能超過10個
alert("一次上傳文件不能超過10個");
return;
}
var formData = new FormData(); //FormData專門用來給ajax向後臺傳遞文件用的
formData.append("action", "FileLoad");//向後臺傳遞值、是鍵值對的形式
formData.append("file", fileObj[i]); //向formData 裏追加文件
}
$.ajax({
url: "../Method/FileUpload.ashx",
type: "post",
cache: false,
data: formData,
cache: false,//上傳文件無需緩存
processData: false,//用於對data參數進行序列化處理 這裏必須false
contentType: false,
success: function (data) {
if (data == ‘OK‘) {
//上傳完成
};
}
}
});
});
3.一般處理程序(上傳)
public void FileLoad(HttpContext context)
{
string path = "";//文件保存路徑
for (int i = 0; i < context.Request.Files.Count; i++)
{
HttpPostedFile file = context.Request.Files[i];
path = context.Server.MapPath("~/File/" + file.FileName);
file.SaveAs(path);
}
//返回json數據
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize("OK"));
}
4.文件下載前端
我這裏不方便使用項目中的代碼,所以就簡單寫個Demo
<a href="../Method/FileDowload.ashx?action=DowFile&filename=1.txt">下載</a> 直接使用a標簽訪問一般處理程序,帶兩個參數 分別為需要請求的方法和需要下載的文件名稱
action=DowFile、filename=1.txt
4.一般處理程序(下載)
public void DowFile(HttpContext context)
{
string filename = context.Request["filename"].ToString(); //文件名稱就是前端傳來的filename這個參數
string path = "~/File/" + filename;
System.IO.FileInfo file = new System.IO.FileInfo(System.Web.HttpContext.Current.Server.MapPath(path));
context.Response.Clear();
context.Response.Charset = "UTF-8";
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.AddHeader("Content-Type", "application/octet-stream");
// 添加頭信息,為"文件下載/另存為"對話框指定默認文件名,設定編碼為UTF8,防止中文文件名出現亂碼
context.Response.AddHeader("Content-Disposition", "attachment; filename=" + System.Web.HttpUtility.UrlEncode(file.Name, System.Text.Encoding.UTF8));
// 添加頭信息,指定文件大小,讓瀏覽器能夠顯示下載進度
context.Response.AddHeader("Content-Length", file.Length.ToString());
//// 指定返回的是一個不能被客戶端讀取的流,必須被下載
context.Response.ContentType = "application/ms-excel";
// 把文件流發送到客戶端
context.Response.WriteFile(path);
// 停止頁面的執行
context.Response.End();
}
我這個是在項目的跟目錄裏創建了一個文件夾File。<input type="file" multiple="multiple" id="file_load" />標簽的默認樣式改法有很多 百度上有
使用Ajax和一般處理程序實現文件上傳與下載