ExtJS+ASP.NET實現單檔案上傳(FileUpload)

簡單的實現ExtJS+ASP.NET單檔案上傳(FileUpload)，首先在伺服器端加一個httpHandler，代碼如下：

 1:  

 2: using System;

 3: using System.Web;

 4: using System.IO;

 5: using System.Web.Script.Serialization;

 6:  

 7: namespace MyApplication

 8: {

 9: public class FileUploadHandler : IHttpHandler

 10: {

 11: public void ProcessRequest(HttpContext context)

 12: {

 13: int iTotal = context.Request.Files.Count;

 14:  

 15: if (iTotal == 0) return;

 16:  

 17: HttpPostedFile file = context.Request.Files[0];

 18: int len = file.ContentLength;

 19: 

 20: if (len > 0 && !string.IsNullOrEmpty(file.FileName))

 21: {

 22: string parentPath = HttpContext.Current.Server.MapPath("./upload/");

 23:  

 24: if (!Directory.Exists(parentPath))

 25: {

 26: Directory.CreateDirectory(parentPath);

 27: }

 28:  

 29: string guidPath = Path.Combine(parentPath, System.Guid.NewGuid().ToString());

 30:  

 31: Directory.CreateDirectory(guidPath);

 32:  

 33: //儲存檔案

 34: file.SaveAs(Path.Combine(guidPath, Path.GetFileName(file.FileName)));

 35: 

 36: FileInfo info = new FileInfo();

 37: info.path = Path.Combine(guidPath, Path.GetFileName(file.FileName));

 38: info.name = Path.GetFileName(file.FileName);

 39: info.tp = Path.GetExtension(file.FileName).ToUpper();

 40: info.size = len.ToString ();

 41: 

 42: //序列化

 43: JavaScriptSerializer j = new JavaScriptSerializer();

 44:  

 45: context.Response.Write(j.Serialize(info));

 46: context.Response.End();

 47: }

 48: }

 49:  

 50: public bool IsReusable

 51: {

 52: get

 53: {

 54: return false;

 55: }

 56: }

 57: }

 58:  

 59: public class FileInfo

 60: {

 61: public string name;

 62: public string path;

 63: public string size;

 64: public string tp;

 65: }

 66: }

用戶端JS：

 1: ShowUploadForm = function(fileTypeHint, displayCallback){

 2: Ext.QuickTips.init();

 3: var fibasic = null;

 4: var fp = new Ext.FormPanel({

 5: region : 'center',

 6: labelWidth : 35,

 7: frame : true,

 8: bodyStyle : 'padding:5px 5px 0',

 9: autoScroll : true,

 10: border : false,

 11: fileUpload : true,

 12: items : [

 13: {

 14: xtype : 'textfield',

 15: fieldLabel : 'File',

 16: name : 'userfile',

 17: id:'txtFile',

 18: inputType : 'file',

 19: width : 160,

 20: allowBlank : true,

 21: blankText : 'File cannot be empty',

 22: height : 25,

 23: anchor : '90%'

 24: },

 25: {

 26: bodyStyle:"padding-left:60px",

 27: html:"<br/><span><font color='#666666'>" + fileTypeHint + "</font></span>"

 28: }],

 29: buttons : [{

 30: text : 'Upload',

 31: type : 'submit',

 32: handler : function() {

 33: if(document.getElementById("txtFile").value == '') return;

 34:  

 35: if (!fp.form.isValid()) {return;}

 36: fp.form.submit({

 37: waitMsg : 'Uploading ....',

 38: url : 'FileUpload.ashx', //此處設定服務端的httpHandler ******, 需要在web.config中也設定**************************

 39: success : function(form, action) {

 40: win.close(this);

 41: },

 42: failure : function(form, action) {

 43: if(displayCallback)

 44: displayCallback(action.result.path, action.result.name, action.result.size, action.result.tp);

 45: win.close(this);

 46: }

 47: });

 48: }

 49: }, {

 50: text : 'Close',

 51: type : 'submit',

 52: handler : function() {

 53: win.close(this);

 54: }

 55: }]

 56: });

 57: 

 58: var win = new Ext.Window({ 

 59: title:'File Upload',

 60: layout:'fit',

 61: width:380,

 62: height:295,

 63: plain:true,

 64: items:[fp]

 65: });

 66: 

 67: this.show = function()

 68: { 

 69: win.show(this);

 70: }

 71: 

 72: }

 73:  

 74: //調用這個window樣本： 例如，在button_click事件中：

 75: ShowUploadForm frm = new ShowUploadForm('Open *.txt file', openCallback);

 76: frm.show();

或許您對以下相關文章有興趣：

• 
  ExtJS+ASP.NET實現真實的進度條顯示伺服器端長時間操作的進度
• 
  ExtJS+ASP.NET實現非同步Tree的節點搜尋和尋找下一個(FindNext)
• 
  ExtJS+ASP.NET實現Tree節點的拖動(DragDrop)
• 
  ExtJS+ASP.NET實現Grid到Tree的拖動(DragDrop)
• 使
  用YUI Compressor和DOS批處理指令碼壓縮JavaScript和CSS
• 最佳化JavaScript
• 區
  分JavaScript中的underfined,null和NaN