首先我的後台程序用的是ASP.Net
Javascript用到了Jquery類庫
這裡先給大家介紹下為什麼叫偽Ajax方式上傳，因為這個上傳不會使當前頁面產生刷新的效果，並且也沒有用任何的Ajax技術，但是實現了頁面無刷新的上傳效果，因此小弟稱為偽AJax方式。呵呵，關子賣了很久了！介紹下這個核心吧！核心主要是利用<form>和<iframe>實現！相信對Web Html認識比較深的大蝦們一定猜到個大概了吧！
Html CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<Html XMLns="http://www.w3.org/1999/xHtml">
<head>
<title>File Upload</title>
</head>
<body>
<!--
大家注意到這個form的target的了麼？這個target屬性的值frameFile,是form之後的iframe的name值,
這樣的寫法是讓當前的form表單在提交表單內容的時候轉交給iframe中進行頁面中表單處理，
並且不會產生當前頁面跳轉!
-->
<form id='formFile' name='formFile' method="post" action='/uploads.ASPx' target='frameFile' enctype="multipart/form-data">
<input type='file' id='fileUp' name='fileUp' />
<div id='uploadLog'></div>
<br />
<img width='200' src='' height='200' id='imgShow' alt='縮略圖' />
</form>
<!--
這個iframe拿到post過來的表單數據後會開始在自身內部訪問post過來的頁面地址,在內部中它會刷新頁面，
但是這已不重要了，因為當前的iframe已經被我display:none隱藏了！所以這樣給用戶看起來像是無刷新的
頁面文件上傳，其實只是做一個一個小小的技巧！
-->
<iframe id='frameFile' name='frameFile' style=' display:none;'></iframe>
</body>
</Html>
JavaScript Code:
<script type="text/Javascript" language="Javascript">
$(function () {
$('#fileUp').change(function () {
$('#uploadLog').Html('開始上傳中....');
$('#formFile').submit();
});
})
function uploadSuccess(msg) {
if (msg.split('|').length > 1) {
$('#imgShow').attr('src', msg.split('|')[1]);
$('#uploadLog').Html(msg.split('|')[0]);
} else {
$('#uploadLog').Html(msg);
}
}
</script>
ASP.Net Code:
/// <summary>
/// 頁面加載.在這裡我簡單的寫了下文件上傳的處理Code
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
try
{
//獲取當前Post過來的file集合對象,在這裡我只獲取了<input type='file' name='fileUp'/>的文件控件
HttpPostedFile file = Request.Files["fileUp"];
if (file != null)
{
//當前文件上傳的目錄
string path = Server.MapPath("~/Test/");
//當前待上傳的服務端路徑
string imageUrl = path + Path.GetFileName(file.FileName);
//當前文件後綴名
string ext = Path.GetExtension(file.FileName).ToLower();
//驗證文件類型是否正確
if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
{
//這裡window.parent.uploadSuccess()是我在前端頁面中寫好的Javascript function,此方法主要用於輸出異常和上傳成功後的圖片地址
Response.Write("<script>window.parent.uploadSuccess('你上傳的文件格式不正確！上傳格式有(.gif、.jpg、.png、.bmp)');</script>");
Response.End();
}
//驗證文件的大小
if (file.ContentLength > 1048576)
{
//這裡window.parent.uploadSuccess()是我在前端頁面中寫好的Javascript function,此方法主要用於輸出異常和上傳成功後的圖片地址
Response.Write("<script>window.parent.uploadSuccess('你上傳的文件不能大於1048576KB!請重新上傳！');</script>");
Response.End();
}
//開始上傳
file.SaveAs(imageUrl);
//這裡window.parent.uploadSuccess()是我在前端頁面中寫好的Javascript function,此方法主要用於輸出異常和上傳成功後的圖片地址
//如果成功返回的數據是需要返回兩個字符串，我在這裡使用了|分隔 例： 成功信息|/Test/hello.jpg
Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
Response.End();
}
else
{
//上傳失敗
Response.Write("upload lose!");
Response.End();
}
}
catch {
//上傳失敗
Response.Write("upload lose!");
Response.End();
}
}