Extjs + ASP. NET implements single file upload (fileupload)

Simple implementation of extjs + ASP. NET Single File Upload (fileupload), first add an httphandler on the server side,CodeAs follows:

 
1:
 

 
2: UsingSystem;
 

 
3: UsingSystem. Web;
 

 
4: UsingSystem. IO;
 

 
5: UsingSystem. Web. Script. serialization;
 

 
6:
 

 
7: NamespaceMyapplication
 

 
8:{
 

9: Public ClassFileuploadhandler: ihttphandler
 

 
10:{
 

 
11: Public VoidProcessrequest (httpcontext context)
 

 
12:{
 

 
13: IntItotal = context. Request. Files. count;
 

 
14:
 

 
15: If(Itotal = 0)Return;
 

 
16:
 

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

 
18: IntLen = file. contentlength;
 

 
19: 
 

 
20: If(LEN> 0 &&!String. Isnullorempty (file. filename ))
 

 
21:{
 

 
22: StringParentpath = httpcontext. Current. server. mappath ("./Upload /");
 

 
23:
 

 
24: If(! Directory. exists (parentpath ))
 

25:{
 

 
26:Directory. createdirectory (parentpath );
 

 
27:}
 

 
28:
 

 
29: StringGuidpath = path. Combine (parentpath, system. guid. newguid (). tostring ());
 

 
30:
 

 
31:Directory. createdirectory (guidpath );
 

 
32:
 

 
33: // Save the file
 

 
34:File. saveas (path. Combine (guidpath, path. getfilename (file. filename )));
 

35: 
 

 
36:Fileinfo info =NewFileinfo ();
 

 
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: // Serialization
 

 
43:Javascriptserializer J =NewJavascriptserializer ();
 

44:
 

 
45:Context. response. Write (J. serialize (Info ));
 

 
46:Context. response. End ();
 

 
47:}
 

 
48:}
 

 
49:
 

 
50: Public BoolIsreusable
 

 
51:{
 

 
52:Get
 

 
53:{
 

 
54: Return False;
 

55:}
 

 
56:}
 

 
57:}
 

 
58:
 

 
59: Public ClassFileinfo
 

 
60:{
 

 
61: Public StringName;
 

 
62: Public StringPath;
 

 
63: Public StringSize;
 

64: Public StringTP;
 

 
65:}
 

 
66:}
 

Client JS:

 
1:Showuploadform =Function(Filetypehint, displaycallback ){
 

 
2:Ext. quicktips. INIT ();
 

 
3: VaRFiber ASIC =Null;
 

 
4: VaRFp =NewExt. 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:'123'
 

 
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',// Set httphandler ****** on the server. **************************
 

 
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: VaRWin =NewExt. 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: // Call this window example: for example, in the button_click event:
 

75:Showuploadform FRM =NewShowuploadform ('Open *. txt file', Opencallback );
 

 
76:FRM. Show ();
 

You mayArticleInterested:

• 
  Extjs + ASP. NET implements a real progress bar to display the progress of the server's long-term operations
• 
  Extjs + ASP. NET Implement Asynchronous Tree node search and find next (findnext)
• 
  Extjs + ASP. NET implement tree node dragging (dragdrop)
• 
  Extjs + ASP. NET implement the drag from grid to tree (dragdrop)
• Enable
  Compress JavaScript and CSS with Yui compressor and DOS batch processing scripts
• Optimize Javascript
• Zone
  Contains underfined, null, and Nan in JavaScript.