examples/form/file-upload.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 \r
  10 Ext.onReady(function(){\r
  11 \r
  12     Ext.QuickTips.init();\r
  13     \r
  14     var msg = function(title, msg){\r
  15         Ext.Msg.show({\r
  16             title: title, \r
  17             msg: msg,\r
  18             minWidth: 200,\r
  19             modal: true,\r
  20             icon: Ext.Msg.INFO,\r
  21             buttons: Ext.Msg.OK\r
  22         });\r
  23     };\r
  24     \r
  25     var fibasic = new Ext.form.FileUploadField({\r
  26         renderTo: 'fi-basic',\r
  27         width: 400\r
  28     });\r
  29  \r
  30     new Ext.Button({\r
  31         text: 'Get File Path',\r
  32         renderTo: 'fi-basic-btn',\r
  33         handler: function(){\r
  34             var v = fibasic.getValue();\r
  35             msg('Selected File', v && v != '' ? v : 'None');\r
  36         }\r
  37     });\r
  38     \r
  39     var fbutton = new Ext.form.FileUploadField({\r
  40         renderTo: 'fi-button',\r
  41         buttonOnly: true,\r
  42         listeners: {\r
  43             'fileselected': function(fb, v){\r
  44                 var el = Ext.fly('fi-button-msg');\r
  45                 el.update('<b>Selected:</b> '+v);\r
  46                 if(!el.isVisible()){\r
  47                     el.slideIn('t', {\r
  48                         duration: .2,\r
  49                         easing: 'easeIn',\r
  50                         callback: function(){\r
  51                             el.highlight();\r
  52                         }\r
  53                     });\r
  54                 }else{\r
  55                     el.highlight();\r
  56                 }\r
  57             }\r
  58         }\r
  59     });\r
  60     \r
  61     var fp = new Ext.FormPanel({\r
  62         renderTo: 'fi-form',\r
  63         fileUpload: true,\r
  64         width: 500,\r
  65         frame: true,\r
  66         title: 'File Upload Form',\r
  67         autoHeight: true,\r
  68         bodyStyle: 'padding: 10px 10px 0 10px;',\r
  69         labelWidth: 50,\r
  70         defaults: {\r
  71             anchor: '95%',\r
  72             allowBlank: false,\r
  73             msgTarget: 'side'\r
  74         },\r
  75         items: [{\r
  76             xtype: 'textfield',\r
  77             fieldLabel: 'Name'\r
  78         },{\r
  79             xtype: 'fileuploadfield',\r
  80             id: 'form-file',\r
  81             emptyText: 'Select an image',\r
  82             fieldLabel: 'Photo',\r
  83             name: 'photo-path',\r
  84             buttonCfg: {\r
  85                 text: '',\r
  86                 iconCls: 'upload-icon'\r
  87             }\r
  88         }],\r
  89         buttons: [{\r
  90             text: 'Save',\r
  91             handler: function(){\r
  92                 if(fp.getForm().isValid()){\r
  93                         fp.getForm().submit({\r
  94                             url: 'file-upload.php',\r
  95                             waitMsg: 'Uploading your photo...',\r
  96                             success: function(fp, o){\r
  97                                 msg('Success', 'Processed file "'+o.result.file+'" on the server');\r
  98                             }\r
  99                         });\r
 100                 }\r
 101             }\r
 102         },{\r
 103             text: 'Reset',\r
 104             handler: function(){\r
 105                 fp.getForm().reset();\r
 106             }\r
 107         }]\r
 108     });\r
 109     \r
 110 });