examples/form/file-upload.html

   1 <html>
   2 <head>
   3     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   4     <title>File Upload Field Example</title>
   5
   6     <!-- ** CSS ** -->
   7     <!-- base library -->
   8     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   9
  10     <!-- overrides to base library -->
  11
  12     <!-- page specific -->
  13     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  14     <link rel="stylesheet" type="text/css" href="../ux/fileuploadfield/css/fileuploadfield.css"/>
  15
  16     <style type=text/css>
  17         .upload-icon {
  18             background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important;
  19         }
  20         #fi-button-msg {
  21             border: 2px solid #ccc;
  22             padding: 5px 10px;
  23             background: #eee;
  24             margin: 5px;
  25             float: left;
  26         }
  27     </style>
  28
  29     <!-- ** Javascript ** -->
  30     <!-- ExtJS library: base/adapter -->
  31     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  32
  33     <!-- ExtJS library: all widgets -->
  34     <script type="text/javascript" src="../../ext-all.js"></script>
  35
  36     <!-- overrides to base library -->
  37     <script type="text/javascript" src="../ux/fileuploadfield/FileUploadField.js"></script>
  38
  39     <!-- page specific -->
  40     <script type="text/javascript" src="file-upload.js"></script>
  41
  42 </head>
  43 <body>
  44     <h1>File Upload Field</h1>
  45     <p>This example utilizes a custom extension to implement a file upload field.
  46     The js is not minified so it is readable. See <a href="file-upload.js">file-input.js</a> and
  47     <a href="../ux/fileuploadfield/FileUploadField.js">FileUploadField.js</a>.</p>
  48
  49     <p>
  50         <b>Basic FileUpload</b><br />
  51         A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
  52         consistent, cross-browser way, so it is always read-only in this implementation.
  53         <div id="fi-basic"></div>
  54         <div id="fi-basic-btn"></div>
  55     </p>
  56
  57     <p>
  58         <b>Basic FileUpload (Button-only)</b><br />
  59         You can also render the file input as a button without the text field, with access to the field's value via the
  60         standard <tt>Ext.form.TextField</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
  61         <div id="fi-button"></div>
  62         <div id="fi-button-msg" style="display:none;"></div>
  63         <div class="x-clear"></div>
  64     </p>
  65
  66     <p>
  67         <b>Form Example</b><br />
  68         The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
  69         field is required in this example), empty text, etc.  This example also demonstrates using the
  70         <tt>buttonCfg</tt> option to provide a customized icon upload button.
  71         <div id="fi-form"></div>
  72     </p>
  73 </body>
  74 </html>