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();
或许您对以下相关文章有兴趣：
