http://www.cnblogs.com/keke/archive/2011/05/09/2041370.html
最近做項目遇到了些關於上傳的功能模組，在網上找了很多關於上傳的相關資料，找到了一個依賴於Jquery寫的jquery.uploadify類庫，這個類庫的上傳功能支援的非常全面，不過遺憾的是它是依賴於flash來處理上傳，所以在頁面中呈現不了傳統的上傳控制項的瀏覽方式，因為項目需求必須以傳統的<input type='file'/>形態模式出現在頁面中！所以只好捨去jquery.uploadify類庫強大功能，於是乎自己研究了一番。最終實現了一個靜態上傳的功能！好了，廢話不多說，代碼獻上！如閣下有更好的建議歡迎強力拍磚！小弟不勝感激！
首先我的背景程式用的是ASP.NET
Javascript用到了Jquery類庫
這裡先給大家介紹下為什麼叫偽Ajax方式上傳，因為這個上傳不會使當前頁面產生重新整理的效果，並且也沒有用任何的Ajax技術，但是實現了頁面無重新整理的上傳效果，因此小弟稱為偽Ajax方式。呵呵，關子賣了很久了！介紹下這個核心吧！核心主要是利用<form>和<iframe>實現！相信對Web Html認識比較深的大蝦們一定猜到個大概了吧！
前台：
<!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>
後台：
<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>/// <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
