examples/form/file-upload.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5     <title>File Uploads</title>
   6
   7     <!-- ExtJS -->
   8     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   9     <script type="text/javascript" src="../../bootstrap.js"></script>
  10
  11     <!-- Shared -->
  12     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
  13
  14     <!-- Example -->
  15     <script type="text/javascript" src="file-upload.js"></script>
  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 </head>
  30 <body>
  31     <h1>File Upload Field</h1>
  32
  33     <p>This example demonstrates use of Ext.form.field.File, a file upload field with custom rendering.</p>
  34     <p>The js is not minified so it is readable. See <a href="file-upload.js">file-upload.js</a>.</p>
  35
  36     <h2>Basic File Field</h2>
  37     <p>
  38         A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
  39         consistent, cross-browser way, so it is always read-only. The file path reported by the <code>getValue</code>
  40         method will
  41     </p>
  42     <div id="fi-basic"></div>
  43     <div id="fi-basic-btn"></div>
  44
  45     <h2>Button Only</h2>
  46     <p>
  47         You can also render the file input as a button without the text field, with access to the field's value via the
  48         standard <tt>Ext.form.field.Field</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
  49     </p>
  50     <div id="fi-button"></div>
  51     <div id="fi-button-msg" style="display:none;"></div>
  52     <div class="x-clear"></div>
  53
  54     <h2>Form Example</h2>
  55     <p>
  56         The File field can also be used in form layouts just like any other field, with support for labeling,
  57         validation (the field is required in this example), empty text, etc.  This example also demonstrates
  58         using the <tt>buttonConfig</tt> option to provide a customized icon upload button.
  59     </p>
  60     <div id="fi-form"></div>
  61 </body>
  62 </html>