菠菜我最近在搞 Ext <clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,7)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,7, this);" id="clickeyekey7" onmousemove="kwM(7);" oncontextmenu="return false;">開發</nobr>的郵件系統</clk> , 其中就有用到如何上傳文件這個大眾化的問題 , 經過我一上午的研究和查資料終于搞定 , 現在決定把代碼共享出來 , 方便大家 , 呵呵 .

純屬個人原創 , 所以轉貼請注明出處 :
http://blog.csdn.net/zhangyunbo1116

當然 , 我使用的是 ExtJs 論壇中的一個組件 , <clk>非常感嘆<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,0)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,0, this);" id="clickeyekey0" onmousemove="kwM(0);" oncontextmenu="return false;">作者</nobr>的牛比哄哄</clk> . 作者的大名叫 : MaximGB .. 呵呵 , 現在我就為你到來如何開發這樣的上傳文件 . 基本結構是 :
Ext 前臺實現界面 , 后臺采用 Asp.Net 開發 . Jsp 我會 , 但就是 php 偶不會 , 可是在老外的論壇 ,php 可是王者哦 , 呵呵 !
<clk>需要<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,2)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,2, this);" id="clickeyekey2" onmousemove="kwM(2);" oncontextmenu="return false;">下載</nobr>的</clk> Ext 上傳文件的組件擴展 :
http://max-bazhenov.com/dev/upload-dialog-2.0/index.php
進入開發作者的頁面 , 下載最新的上傳組件包 , 如果不是最新的擴展包 , 有可能作者改過的 bug 你沒有修正 , 這樣 , 豈不是很慘哦 !
現在進入正題 , 我在這里只提供一個最最基本的 demo <clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,6)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,6, this);" id="clickeyekey6" onmousemove="kwM(6);" oncontextmenu="return false;">程序</nobr></clk> , 當然需要你知道的前提知識是 , 如何使用 Ext, 如何在自己的頁面中加入 js 文件 , 如果這個你都不會 , 我真的是很無語 , 你還是先開看 Ext 的基本教程吧 , 然后再看我這篇文章 .

下載后的壓縮包解壓 , <clk>你就會發現<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,10)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,10, this);" id="clickeyekey10" onmousemove="kwM(10);" oncontextmenu="return false;">文件</nobr>不是很多</clk> , 我只提兩個關鍵的文件 :
Ext.ux.UploadDialog.js 這個就是實現功能的 js 文件 , 但是是格式化的 , 方便感興趣的人自己閱讀的 js 代碼文件 , 當你發布應用的時候 , 建議不要引入該文件 , 而是引入下面一個文件 .
Ext.ux.UploadDialog.packed.js 是壓縮好的 , 引入這個文件 , <clk>可以提高<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,1)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,1, this);" id="clickeyekey1" onmousemove="kwM(1);" oncontextmenu="return false;">用戶</nobr>的訪問速度</clk> .
Ext.ux.UploadDialog.css 這是樣式文件 , 應該導入 .
如果你嫌麻煩 , 想直接看真實的東東 , 那就到這里下載 , 里面還有我漢化的一個小小的 js, 文件 , 只要覆蓋 : Ext.ux.UploadDialog.packed.js 就 可以了 .

http://download.csdn.net/user/zhangyunbo1116/
http://download.csdn.net/source/345961

先來 Ext 寫的界面 和對應的 js 代碼 , 該導入的你自己倒哦

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > <clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,12)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,12, this);" id="clickeyekey12" onmousemove="kwM(12);" oncontextmenu="return false;">測試</nobr>如何使用Ext2.0</clk> </ title >
< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >
<!-- 包含Ext2.0Css文件 -->
< link rel ="stylesheet" href ="../Ext-2.0/resources/css/ext-all.css" />

<!-- 包含Ext2.0腳本文件 -->
< script type ="text/javascript" src ="../Ext-2.0/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../Ext-2.0/ext-all.js" ></ script >
< script type ="text/javascript" src ="js/TestFormUpload.js" ></ script >

<!-- 上傳組件使用的鏈接 -->
< link rel ="stylesheet" href ="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css" />
< script type ="text/javascript" src ="Ext.ux.UploadDialog/UploadDialog/Ext.ux.UploadDialog.packed.js" ></ script >

</ head >
< body >
< div id =''demo-panel'' >
< h3 > Demopanel </ h3 >
< div id =''file-list'' ></ div >
< div id =''show-dialog-btn'' ></ div >
</ div >
</ body >
</ html >

// JScriptFile
Ext.onReady( function () ... {
Ext.QuickTips.init();
var btnShow = new Ext.Button( ... {
text: '' 上傳文件 '' ,
listeners: ... {
click: function (btnThis,eventobj) ... {
dialog = new Ext.ux.UploadDialog.Dialog( ... {
url: '' UploadFile.aspx '' ,
reset_on_hide: false ,
allow_close_on_upload: true ,
upload_autostart: true
} );
dialog.show( '' show-button '' );
}
}
} );
btnShow.render( " show-dialog-btn " );
} ); // Ext.onReady


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO; // 注意,導入

public partial class PagesExtMail_AspNet_UploadFile:System.Web.UI.Page
... {
log4net.ILoglog = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);

protected void Page_Load( object sender,EventArgse)
... {
// 我自己有日志,如果你沒有去掉就可以.
log.Info( " Request.Files.Count= " + Request.Files.Count);
string jSONString = string .Empty;
try
... {
if (Request.Files.Count > 0 )
... {
HttpPostedFilepostedFile = Request.Files[ 0 ];
string savePath;
// 請在你的d盤下要建立一個upload這樣的測試目錄.如果沒有,會出錯的
// 可不要告訴我你連D盤都沒有,如果這樣,算你狠...
savePath = @" D:/upload/ " ;
savePath += Path.GetFileName(postedFile.FileName);

// <clk>檢查是否在<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,16)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,16, this);" id="clickeyekey16" onmousemove="kwM(16);" oncontextmenu="return false;">服務器</nobr>上已經存在用戶上傳的同名文件</clk>
if (File.Exists(savePath))
... {
File.Delete(savePath);
}
log.Debug(savePath);
postedFile.SaveAs(savePath);
jSONString = " <clk>{success:true,message:''上傳<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,15)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,15, this);" id="clickeyekey15" onmousemove="kwM(15);" oncontextmenu="return false;">成功</nobr>''}</clk> " ;
}
else
log.Info( " Request.Files.Count= " + Request.Files.Count);
} // try
catch (Exceptionex)
... {
jSONString = " {success:false,message:''上傳失敗,可能因為上傳文件過大導致!''} " ;
log.Info( " 上傳文件出錯: " + ex.Message);
log.Info( " <clk>堆棧<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,11)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,11, this);" id="clickeyekey11" onmousemove="kwM(11);" oncontextmenu="return false;">信息</nobr>是:</clk> " + ex.StackTrace);
} // catch
finally
... {
log.Debug( " jSONString= " + jSONString);

}
// 輸出上傳文件后的后臺相應信息,
// 在這里請你注意刪除你對應頁面的所有html腳本,只需要保留page頭就可以
Response.Write(jSONString);
Response.Flush();

} // pageload
} // class

關于漢化問題 , 開發的作者說的很詳細 , 我就很簡單 , 直接編輯了 Ext.ux.UploadDialog.packed.js . 在這個頁面的最后由一個對象 Ext.ux.UploadDialog.Dialog.prototype. i18n .. 直接把里面的英文改成中文就可以 , <clk>如果各位還信得過偶的英文<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,5)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,5, this);" id="clickeyekey5" onmousemove="kwM(5);" oncontextmenu="return false;">水平</nobr></clk> , 可以拷貝偶的翻譯的東東 , 下載覆蓋 .

可以到這里下載 :

var p=Ext.ux.UploadDialog.Dialog.prototype;p.i18n={title:" 上傳文件 ",state_col_title:" 狀態 ",state_col_width:70,filename_col_title:" 文件名 ",filename_col_width:230,note_col_title:" 備注 ",note_col_width:150,add_btn_text:" 添加 ",add_btn_tip:" 添加文件到上傳隊列。 ",remove_btn_text:" 刪除 ",remove_btn_tip:" 從上傳隊列刪除文件。 ",reset_btn_text:" 重置 ",reset_btn_tip:" 重置隊列。 ",upload_btn_start_text:" 開始上傳 ",upload_btn_stop_text:" 中斷上傳 ",upload_btn_start_tip:" 上傳文件對列。 ",upload_btn_stop_tip:" 停止上傳。 ",close_btn_text:" 關閉 ",close_btn_tip:" 關閉上傳對話框。 ",progress_waiting_text:" 等待 ...",progress_uploading_text:" 上傳中 : {0} 的 {1} 文件集合成功。 ",error_msgbox_title:" 錯誤 ",permitted_extensions_join_str:",",err_file_type_not_permitted:" 不支持上傳該類型文件 .<br/> 請選擇下列類型的文件集合 {1}",note_queued_to_upload:" 上傳的隊列。 ",note_processing:" 上傳中 ...",note_upload_failed:" 當前請求過多，服務器正忙，不能及時響應或者因特網服務器發生錯誤。 ",note_upload_success:" 成功。 ",note_upload_error:" 上傳文件出錯。 ",note_aborted:" 已經被用戶中斷 "}

到現在 , 就完了 , 祝各位新年快樂 , 萬事大吉 , 鼠年發財 …..

Ext 上傳文件,前后臺實現, Asp.net 代碼