菠菜我最近在搞 Ext 開發的郵件系統, 其中就有用到如何上傳文件這個大眾化的問題,經過我一上午的研究和查資料終於搞定,現在決定把代碼共享出來,方便大家,呵呵.
純屬個人原創,所以轉貼請注明出處:
http://blog.csdn.Net/zhangyunbo1116
當然,我使用的是 ExtJS論壇中的一個組件, 非常感歎作者的牛比哄哄. 作者的大名叫: MaximGB .. 呵呵,現在我就為你到來如何開發這樣的上傳文件. 基本結構是:
Ext 前台實現界面,後台采用 ASP.Net 開發. JSP 我會,但就是 php 偶不會,可是在老外的論壇,PHP可是王者哦,呵呵!
需要下載的 Ext 上傳文件的組件擴展:
http://max-bazhenov.com/dev/upload-dialog-2.0/index.PHP
進入開發作者的頁面,下載最新的上傳組件包, 如果不是最新的擴展包,有可能作者改過的bug你沒有修正,這樣,豈不是很慘哦!
現在進入正題,我在這裡只提供一個最最基本的 demo 程序, 當然需要你知道的前提知識是,如何使用 Ext, 如何在自己的頁面中加入 JS 文件,如果這個你都不會,我真的是很無語,你還是先開看 Ext 的基本教程吧,然後再看我這篇文章.
下載後的壓縮包解壓,你就會發現文件不是很多,我只提兩個關鍵的文件:
Ext.ux.UploadDialog.js 這個就是實現功能的 js文件,但是是格式化的,方便感興趣的人自己閱讀的 JS 代碼文件,當你發布應用的時候,建議不要引入該文件,而是引入下面一個文件.
Ext.ux.UploadDialog.packed.JS 是壓縮好的,引入這個文件,可以提高用戶的訪問速度.
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>測試如何使用Ext 2.0</title> <meta http-equiv="Content-Type" content="text/Html; charset=gb2312"> <!-- 包含Ext2.0 CSS 文件--> <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>Demo panel</h3> <div id=''file-list''></div> <div id=''show-dialog-btn''></div> </div></body></Html>
// JScript File
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.onReadyusing 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.ILog log = log4net.LogManager.GetLogger(System.Reflection.MethoDBase.GetCurrentMethod().DeclaringType); protected void Page_Load(object sender, EventArgs e) ...{ //我自己有日志,如果你沒有去掉就可以. log.Info("Request.Files.Count=" + Request.Files.Count); string JSONString = string.Empty; try if (Request.Files.Count > 0) ...{ HttpPostedFile postedFile = Request.Files[0]; string savePath ; //請在你的d 盤下要建立一個upload 這樣的測試目錄.如果沒有,會出錯的 //可不要告訴我你連D 盤都沒有,如果這樣,算你狠... savePath = @"D:/upload/"; savePath += Path.GetFileName(postedFile.FileName); //檢查是否在服務器上已經存在用戶上傳的同名文件 if (File.Exists(savePath)) ...{ File.Delete(savePath); } log.Debug(savePath); postedFile.SaveAs(savePath); JSONString = "{success:true,message:''上傳成功''}"; } log.Info("Request.Files.Count=" + Request.Files.Count); }//try catch (Exception ex) ...{ JSONString = "{success:false,message:''上傳失敗,可能因為上傳文件過大導致!''}"; log.Info("上傳文件出錯:"+ex.Message); log.Info("堆棧信息是 :" + 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 .. 直接把裡面的英文改成中文就可以,如果各位還信得過偶的英文水平,可以拷貝偶的翻譯的東東,下載覆蓋.
可以到這裡下載:
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:"已經被用戶中斷"}
到現在,就完了,祝各位新年快樂,萬事大吉,鼠年發財…..
