ExtJS+ASP.NET实现单文件上传(FileUpload)

简单的实现ExtJS+ASP.NET单文件上传(FileUpload)，首先在服务器端加一个httpHandler，代码如下：

  
using System;
using System.Web;
using System.IO;
using System.Web.Script.Serialization;
  
namespace MyApplication
{
public class FileUploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int iTotal = context.Request.Files.Count;
  
if (iTotal == 0) return;
  
HttpPostedFile file = context.Request.Files[0];
int len = file.ContentLength;

if (len > 0 && !string.IsNullOrEmpty(file.FileName))
{
string parentPath = HttpContext.Current.Server.MapPath("./upload/");
  
if (!Directory.Exists(parentPath))
{
Directory.CreateDirectory(parentPath);
}
  
string guidPath = Path.Combine(parentPath, System.Guid.NewGuid().ToString());
  
Directory.CreateDirectory(guidPath);
  
//保存文件
file.SaveAs(Path.Combine(guidPath, Path.GetFileName(file.FileName)));

FileInfo info = new FileInfo();
info.path = Path.Combine(guidPath, Path.GetFileName(file.FileName));
info.name = Path.GetFileName(file.FileName);
info.tp = Path.GetExtension(file.FileName).ToUpper();
info.size = len.ToString ();

//序列化
JavaScriptSerializer j = new JavaScriptSerializer();
  
context.Response.Write(j.Serialize(info));
context.Response.End();
}
}
  
public bool IsReusable
{
get
{
return false;
}
}
}
  
public class FileInfo
{
public string name;
public string path;
public string size;
public string tp;
}
}

客户端JS：

ShowUploadForm = function(fileTypeHint, displayCallback){
Ext.QuickTips.init();
var fibasic = null;
var fp = new Ext.FormPanel({
region : 'center',
labelWidth : 35,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [
{
xtype : 'textfield',
fieldLabel : 'File',
name : 'userfile',
id:'txtFile',
inputType : 'file',
width : 160,
allowBlank : true,
blankText : 'File cannot be empty',
height : 25,
anchor : '90%'
},
{
bodyStyle:"padding-left:60px",
html:"<br/><span><font color='#666666'>" + fileTypeHint + "</font></span>"
}],
buttons : [{
text : 'Upload',
type : 'submit',
handler : function() {
if(document.getElementById("txtFile").value == '') return;
  
if (!fp.form.isValid()) {return;}
fp.form.submit({
waitMsg : 'Uploading ....',
url : 'FileUpload.ashx', //此处设置服务端的httpHandler ******, 需要在web.config中也设置**************************
success : function(form, action) {
win.close(this);
},
failure : function(form, action) {
if(displayCallback)
displayCallback(action.result.path, action.result.name, action.result.size, action.result.tp);
win.close(this);
}
});
}
}, {
text : 'Close',
type : 'submit',
handler : function() {
win.close(this);
}
}]
});

var win = new Ext.Window({ 
title:'File Upload',
layout:'fit',
width:380,
height:295,
plain:true,
items:[fp]
});

this.show = function()
{ 
win.show(this);
}

}
  
//调用这个window示例： 例如，在button_click事件中：
ShowUploadForm frm = new ShowUploadForm('Open *.txt file', openCallback);
frm.show();