最近做項目遇到了些關於上傳的功能模組，在網上找了很多關於上傳的相關資料，找到了一個依賴於Jquery寫的jquery.uploadify類庫，這個類庫的上傳功能支援的非常全面，不過遺憾的是它是依賴於flash來處理上傳，所以在頁面中呈現不了傳統的上傳控制項的瀏覽方式，因為項目需求必須以傳統的<input type='file'/>形態模式出現在頁面中！所以只好捨去jquery.uploadify類庫強大功能，於是乎自己研究了一番。最終實現了一個靜態上傳的功能！好了，廢話不多說，代碼獻上！如閣下有更好的建議歡迎強力拍磚！小弟不勝感激！
首先我的背景程式用的是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();
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
